@aiworkbench/vibe-ide 0.0.3 → 0.0.4

package/dist/power-user.js

@@ -0,0 +1,4554 @@
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: (newValue) => all[name] = () => newValue
+    });
+};
+var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// src/core/path-policy.ts
+function normalizePath(path) {
+  const normalized = path.replace(/\\/g, "/").trim();
+  if (!normalized)
+    return "/";
+  return normalized.startsWith("/") ? normalized : `/${normalized}`;
+}
+function getBasename(path) {
+  const segments = path.split("/").filter(Boolean);
+  return segments[segments.length - 1] ?? "";
+}
+function validateAndNormalizePath(path) {
+  const trimmed = path.trim();
+  if (!trimmed) {
+    throw new Error("Path validation failed: path cannot be empty.");
+  }
+  if (trimmed.includes("\x00")) {
+    throw new Error("Path validation failed: path contains invalid characters.");
+  }
+  const normalized = trimmed.replace(/\\/g, "/");
+  if (normalized.startsWith("/")) {
+    throw new Error("Path validation failed: absolute paths are not allowed.");
+  }
+  const parts = normalized.split("/");
+  const resolved = [];
+  for (const part of parts) {
+    if (!part || part === ".")
+      continue;
+    if (part === "..") {
+      throw new Error("Path validation failed: parent-directory traversal is not allowed.");
+    }
+    resolved.push(part);
+  }
+  return `/${resolved.join("/")}`;
+}
+function isSecretPath(path) {
+  const normalized = normalizePath(path);
+  const basename = getBasename(normalized);
+  if (SECRET_EXTENSION_PATTERN.test(basename))
+    return true;
+  if (SECRET_BASENAME_PATTERNS.some((p) => p.test(basename)))
+    return true;
+  return SECRET_PATH_PATTERNS.some((p) => p.test(normalized));
+}
+function sanitizePath(path) {
+  const normalized = validateAndNormalizePath(path);
+  if (isSecretPath(normalized)) {
+    throw new Error("Path validation failed: access to secrets is denied.");
+  }
+  return normalized;
+}
+function isExcludedDir(name) {
+  return EXCLUDED_DIRS.has(name);
+}
+function pathContainsExcludedDir(path) {
+  const segments = path.split("/").filter(Boolean);
+  return segments.some((s) => EXCLUDED_DIRS.has(s));
+}
+function pathRequiresApproval(path) {
+  if (path === "/")
+    return true;
+  const segments = path.split("/").filter(Boolean);
+  if (segments.length === 0)
+    return true;
+  const basename = segments[segments.length - 1] ?? "";
+  if (path === "/manifest.json")
+    return true;
+  if (APPROVAL_REQUIRED_BASENAMES.has(basename))
+    return true;
+  if (APPROVAL_REQUIRED_FILE_PATTERNS.some((p) => p.test(basename)))
+    return true;
+  if (segments.some((s) => APPROVAL_REQUIRED_SEGMENTS.has(s)))
+    return true;
+  if (segments.some((s) => APPROVAL_REQUIRED_RUNTIME_DIRS.has(s)))
+    return true;
+  return false;
+}
+function getBlockedNpmFlag(args) {
+  for (const arg of args) {
+    if (BLOCKED_NPM_FLAGS.includes(arg))
+      return arg;
+    if (arg.startsWith("--prefix=") || arg.startsWith("--workspace=") || arg.startsWith("--workspaces=") || arg.startsWith("--include-workspace-root=") || arg.startsWith("--userconfig=") || arg.startsWith("--script-shell=") || arg.startsWith("-C=")) {
+      return arg;
+    }
+  }
+  return null;
+}
+function hasShellCompositionChars(args) {
+  return args.some((arg) => /[&|;><`]/.test(arg));
+}
+var EXCLUDED_DIRS, SECRET_BASENAME_PATTERNS, SECRET_EXTENSION_PATTERN, SECRET_PATH_PATTERNS, MAX_SNAPSHOT_FILES = 2000, MAX_SNAPSHOT_BYTES, MAX_FILE_BYTES, LARGE_FILE_THRESHOLD, APPROVAL_REQUIRED_BASENAMES, APPROVAL_REQUIRED_FILE_PATTERNS, APPROVAL_REQUIRED_SEGMENTS, APPROVAL_REQUIRED_RUNTIME_DIRS, BLOCKED_NPM_FLAGS;
+var init_path_policy = __esm(() => {
+  EXCLUDED_DIRS = new Set([
+    "node_modules",
+    ".vite",
+    "dist",
+    ".cache",
+    ".ide"
+  ]);
+  SECRET_BASENAME_PATTERNS = [
+    /^\.env(?:\..*)?$/i,
+    /^\.npmrc$/i,
+    /^credentials(?:\.(?:json|ya?ml|toml|ini|env|txt))?$/i,
+    /^secrets?(?:\.(?:json|ya?ml|toml|ini|env|txt))?$/i,
+    /^tokens?(?:\.(?:json|ya?ml|toml|ini|env|txt))?$/i,
+    /^id_(?:rsa|dsa|ecdsa|ed25519)$/i,
+    /^\.?git-credentials$/i
+  ];
+  SECRET_EXTENSION_PATTERN = /\.(?:pem|key|p12|pfx|crt|cer|der)$/i;
+  SECRET_PATH_PATTERNS = [/\/.aws\/credentials$/i];
+  MAX_SNAPSHOT_BYTES = 50 * 1024 * 1024;
+  MAX_FILE_BYTES = 5 * 1024 * 1024;
+  LARGE_FILE_THRESHOLD = 500 * 1024;
+  APPROVAL_REQUIRED_BASENAMES = new Set([
+    "package.json",
+    "package-lock.json",
+    "npm-shrinkwrap.json",
+    "yarn.lock",
+    "pnpm-lock.yaml",
+    "bun.lock",
+    "bun.lockb",
+    ".npmrc"
+  ]);
+  APPROVAL_REQUIRED_FILE_PATTERNS = [
+    /^vite\.config\.[cm]?[jt]s$/i,
+    /^webpack\.config\.[cm]?[jt]s$/i,
+    /^rollup\.config\.[cm]?[jt]s$/i,
+    /^esbuild\.config\.[cm]?[jt]s$/i,
+    /^postcss\.config\.[cm]?[jt]s$/i,
+    /^tailwind\.config\.[cm]?[jt]s$/i,
+    /^eslint\.config\.[cm]?[jt]s$/i,
+    /^prettier\.config\.[cm]?[jt]s$/i,
+    /^babel\.config\.[cm]?[jt]s$/i,
+    /^jest\.config\.[cm]?[jt]s$/i,
+    /^vitest\.config\.[cm]?[jt]s$/i,
+    /^tsup\.config\.[cm]?[jt]s$/i,
+    /^dockerfile(?:\..+)?$/i,
+    /\.(?:sh|bash|zsh|fish|ps1|cmd|bat)$/i
+  ];
+  APPROVAL_REQUIRED_SEGMENTS = new Set(["node_modules", ".ide"]);
+  APPROVAL_REQUIRED_RUNTIME_DIRS = new Set([
+    "dist",
+    "build",
+    ".cache",
+    ".vite",
+    ".next",
+    ".nuxt",
+    "coverage"
+  ]);
+  BLOCKED_NPM_FLAGS = [
+    "--prefix",
+    "--workspace",
+    "--workspaces",
+    "--include-workspace-root",
+    "-w",
+    "-C",
+    "--script-shell",
+    "--userconfig",
+    "--"
+  ];
+});
+
+// src/core/filesystem.ts
+async function readTreeStructure(instance, basePath = "/", options) {
+  const excludes = new Set([...EXCLUDED_DIRS, ...options?.exclude ?? []]);
+  const result = [];
+  const entries = await instance.fs.readdir(basePath, { withFileTypes: true });
+  const sorted = [...entries].sort((a, b) => {
+    if (a.isDirectory() !== b.isDirectory()) {
+      return a.isDirectory() ? -1 : 1;
+    }
+    return a.name.localeCompare(b.name);
+  });
+  for (const entry of sorted) {
+    if (excludes.has(entry.name))
+      continue;
+    const fullPath = basePath === "/" ? `/${entry.name}` : `${basePath}/${entry.name}`;
+    if (isSecretPath(fullPath))
+      continue;
+    if (entry.isDirectory()) {
+      const children = await readTreeStructure(instance, fullPath, options);
+      result.push({
+        name: entry.name,
+        path: fullPath,
+        type: "directory",
+        children
+      });
+    } else {
+      result.push({
+        name: entry.name,
+        path: fullPath,
+        type: "file"
+      });
+    }
+  }
+  return result;
+}
+async function readFileTree(instance, basePath = "/", options = {}) {
+  const tree = {};
+  const excludes = new Set([...EXCLUDED_DIRS, ...options.exclude || []]);
+  async function walk(currentPath, currentTree) {
+    const entries = await instance.fs.readdir(currentPath, {
+      withFileTypes: true
+    });
+    const sorted = [...entries].sort((a, b) => a.name.localeCompare(b.name));
+    for (const entry of sorted) {
+      if (excludes.has(entry.name))
+        continue;
+      const fullPath = currentPath === "/" ? `/${entry.name}` : `${currentPath}/${entry.name}`;
+      if (isSecretPath(fullPath))
+        continue;
+      if (entry.isDirectory()) {
+        const dirTree = {};
+        currentTree[entry.name] = { directory: dirTree };
+        await walk(fullPath, dirTree);
+      } else {
+        const content = await instance.fs.readFile(fullPath, "utf8");
+        currentTree[entry.name] = { file: { contents: content } };
+      }
+    }
+  }
+  await walk(basePath, tree);
+  return tree;
+}
+async function createCanonicalSnapshot(instance, options) {
+  const files = [];
+  let totalBytes = 0;
+  const tree = await readFileTree(instance, "/", options);
+  function flatten(t, currentPath) {
+    for (const [name, node] of Object.entries(t)) {
+      const fullPath = currentPath === "/" ? `/${name}` : `${currentPath}/${name}`;
+      if ("file" in node && node.file && "contents" in node.file) {
+        const content = node.file.contents;
+        const byteSize = new TextEncoder().encode(content).byteLength;
+        if (byteSize > MAX_FILE_BYTES) {
+          throw new Error(`Snapshot rejected: file "${fullPath}" is ${(byteSize / 1024 / 1024).toFixed(1)}MB, ` + `exceeding the ${(MAX_FILE_BYTES / 1024 / 1024).toFixed(0)}MB per-file limit.`);
+        }
+        totalBytes += byteSize;
+        files.push({ path: fullPath, content, byteSize });
+      } else if ("directory" in node && node.directory) {
+        flatten(node.directory, fullPath);
+      }
+    }
+  }
+  flatten(tree, "/");
+  files.sort((a, b) => a.path.localeCompare(b.path));
+  if (files.length > MAX_SNAPSHOT_FILES) {
+    throw new Error(`Snapshot rejected: ${files.length} files exceeds the ${MAX_SNAPSHOT_FILES} file cap.`);
+  }
+  if (totalBytes > MAX_SNAPSHOT_BYTES) {
+    throw new Error(`Snapshot rejected: ${(totalBytes / 1024 / 1024).toFixed(1)}MB exceeds the ` + `${(MAX_SNAPSHOT_BYTES / 1024 / 1024).toFixed(0)}MB uncompressed size cap.`);
+  }
+  const canonical = files.map((f) => `${f.path}\x00${f.content}`).join("\x00\x00");
+  const encoded = new TextEncoder().encode(canonical);
+  const hashBuffer = await crypto.subtle.digest("SHA-256", encoded);
+  const treeHash = Array.from(new Uint8Array(hashBuffer)).map((b) => b.toString(16).padStart(2, "0")).join("");
+  return {
+    files,
+    fileCount: files.length,
+    totalBytes,
+    treeHash
+  };
+}
+function snapshotToFileSystemTree(snapshot) {
+  const tree = {};
+  for (const file of snapshot.files) {
+    const segments = file.path.split("/").filter(Boolean);
+    let current = tree;
+    for (let i = 0;i < segments.length - 1; i++) {
+      const seg = segments[i];
+      if (!(seg in current)) {
+        current[seg] = { directory: {} };
+      }
+      const node = current[seg];
+      if (node && typeof node === "object" && "directory" in node && node.directory) {
+        current = node.directory;
+      }
+    }
+    const filename = segments[segments.length - 1];
+    current[filename] = { file: { contents: file.content } };
+  }
+  return tree;
+}
+async function serializeProject(instance) {
+  const tree = await readFileTree(instance);
+  const result = [];
+  function flatten(t, currentPath) {
+    for (const [name, node] of Object.entries(t)) {
+      const fullPath = currentPath === "/" ? `/${name}` : `${currentPath}/${name}`;
+      if ("file" in node && node.file && "contents" in node.file) {
+        result.push({ path: fullPath, content: node.file.contents });
+      } else if ("directory" in node && node.directory) {
+        flatten(node.directory, fullPath);
+      }
+    }
+  }
+  flatten(tree, "/");
+  return result;
+}
+async function writeFileTree(instance, _path, tree) {
+  await instance.mount(tree);
+}
+
+class WriteCoalescer {
+  instance;
+  pending = new Map;
+  timer = null;
+  dirty = false;
+  maxBufferSize;
+  currentBufferSize = 0;
+  onFlush;
+  writeListeners = new Set;
+  deleteListeners = new Set;
+  constructor(instance, options) {
+    this.instance = instance;
+    this.maxBufferSize = options?.maxBufferSize ?? 5 * 1024 * 1024;
+    this.onFlush = options?.onFlush;
+  }
+  onWrite(listener) {
+    this.writeListeners.add(listener);
+    return () => {
+      this.writeListeners.delete(listener);
+    };
+  }
+  onDelete(listener) {
+    this.deleteListeners.add(listener);
+    return () => {
+      this.deleteListeners.delete(listener);
+    };
+  }
+  notifyDelete(path) {
+    for (const listener of this.deleteListeners) {
+      try {
+        listener(path);
+      } catch {}
+    }
+  }
+  enqueue(path, content) {
+    const size = new Blob([content]).size;
+    if (this.currentBufferSize + size > this.maxBufferSize) {
+      const files = Array.from(this.pending.entries()).map(([k, v]) => ({
+        path: k,
+        content: v
+      }));
+      this.flushImmediate(files);
+      if (size > this.maxBufferSize) {
+        console.warn("WriteCoalescer: single file exceeds buffer capacity, skipping coalesce.");
+        this.writeDirect(path, content);
+        return;
+      }
+    }
+    this.pending.set(path, content);
+    this.currentBufferSize += size;
+    this.dirty = true;
+    this.scheduleFlush();
+  }
+  write(path, content) {
+    this.enqueue(path, content);
+  }
+  scheduleFlush(idleMs = 150) {
+    if (this.timer !== null)
+      window.clearTimeout(this.timer);
+    this.timer = window.setTimeout(() => {
+      const files = Array.from(this.pending.entries()).map(([k, v]) => ({
+        path: k,
+        content: v
+      }));
+      this.flushImmediate(files);
+    }, idleMs);
+  }
+  async flushImmediate(files) {
+    if (this.timer !== null) {
+      window.clearTimeout(this.timer);
+      this.timer = null;
+    }
+    if (files.length === 0)
+      return;
+    this.currentBufferSize = 0;
+    for (const file of files) {
+      await this.writeDirect(file.path, file.content);
+      this.pending.delete(file.path);
+      for (const listener of this.writeListeners) {
+        try {
+          listener(file.path);
+        } catch {}
+      }
+    }
+    this.dirty = false;
+    this.onFlush?.();
+  }
+  async writeDirect(path, content) {
+    const parts = path.split("/");
+    let p = "";
+    for (let i = 0;i < parts.length - 1; i++) {
+      if (!parts[i])
+        continue;
+      p += "/" + parts[i];
+      try {
+        await this.instance.fs.mkdir(p);
+      } catch {}
+    }
+    await this.instance.fs.writeFile(path, content);
+  }
+  destroy() {
+    if (this.timer !== null)
+      window.clearTimeout(this.timer);
+    this.writeListeners.clear();
+    this.deleteListeners.clear();
+  }
+}
+var init_filesystem = __esm(() => {
+  init_path_policy();
+  init_path_policy();
+});
+
+// src/core/process-registry.ts
+class ProcessRegistry {
+  processes = new Map;
+  outputListeners = new Set;
+  processEventListeners = new Set;
+  instance;
+  constructor(instance) {
+    this.instance = instance;
+  }
+  isRunning(key) {
+    return this.processes.has(key);
+  }
+  get(key) {
+    return this.processes.get(key) ?? null;
+  }
+  getAll() {
+    return Array.from(this.processes.values());
+  }
+  async spawn(key, command, args, options) {
+    if (this.processes.has(key)) {
+      throw new Error(`Process "${key}" is already running. Kill it first or use a different key.`);
+    }
+    const maxOutput = options?.maxOutput ?? 2 * 1024 * 1024;
+    const timeout = options?.timeout ?? 0;
+    const proc = await this.instance.spawn(command, args);
+    let isKilled = false;
+    let totalOutput = 0;
+    let outputBuffer = "";
+    let rafScheduled = false;
+    const flushBuffer = () => {
+      if (outputBuffer.length > 0 && !isKilled) {
+        const chunk = outputBuffer;
+        outputBuffer = "";
+        this.emitOutput(key, chunk);
+      }
+      rafScheduled = false;
+    };
+    const stream = new WritableStream({
+      write: (data) => {
+        if (isKilled)
+          return;
+        totalOutput += data.length;
+        if (totalOutput > maxOutput) {
+          this.emitOutput(key, `
+--- Output limit reached, killing process ---
+`);
+          isKilled = true;
+          proc.kill();
+          return;
+        }
+        outputBuffer += data;
+        if (outputBuffer.length > 50 * 1024) {
+          flushBuffer();
+          return;
+        }
+        if (!rafScheduled) {
+          rafScheduled = true;
+          requestAnimationFrame(flushBuffer);
+        }
+      }
+    });
+    proc.output.pipeTo(stream).catch(() => {});
+    let timeoutId;
+    if (timeout > 0) {
+      timeoutId = window.setTimeout(() => {
+        if (!isKilled) {
+          isKilled = true;
+          this.emitOutput(key, `
+--- Process "${key}" timed out after ${timeout}ms ---
+`);
+          proc.kill();
+        }
+      }, timeout);
+    }
+    const exitCode = new Promise((resolve) => {
+      proc.exit.then((code) => {
+        if (timeoutId)
+          window.clearTimeout(timeoutId);
+        if (outputBuffer.length > 0 && !isKilled) {
+          this.emitOutput(key, outputBuffer);
+          outputBuffer = "";
+        }
+        this.processes.delete(key);
+        this.emitProcessEvent(key, null);
+        resolve(isKilled ? 143 : code);
+      });
+    });
+    const entry = {
+      key,
+      command,
+      args,
+      exitCode,
+      kill: () => {
+        isKilled = true;
+        proc.kill();
+      },
+      startedAt: Date.now()
+    };
+    this.processes.set(key, entry);
+    this.emitProcessEvent(key, entry);
+    this.emitOutput(key, `
+\x1B[90m$ ${command} ${args.join(" ")}\x1B[0m
+`);
+    return entry;
+  }
+  kill(key) {
+    const entry = this.processes.get(key);
+    if (entry) {
+      entry.kill();
+    }
+  }
+  killAll() {
+    for (const entry of this.processes.values()) {
+      entry.kill();
+    }
+  }
+  onOutput(listener) {
+    this.outputListeners.add(listener);
+    return () => {
+      this.outputListeners.delete(listener);
+    };
+  }
+  onProcessEvent(listener) {
+    this.processEventListeners.add(listener);
+    return () => {
+      this.processEventListeners.delete(listener);
+    };
+  }
+  writeSystemMessage(message) {
+    this.emitOutput("system", `\x1B[90m${message}\x1B[0m
+`);
+  }
+  emitOutput(key, chunk) {
+    for (const listener of this.outputListeners) {
+      try {
+        listener(key, chunk);
+      } catch {}
+    }
+  }
+  emitProcessEvent(key, entry) {
+    for (const listener of this.processEventListeners) {
+      try {
+        listener(key, entry);
+      } catch {}
+    }
+  }
+  destroy() {
+    this.killAll();
+    this.outputListeners.clear();
+    this.processEventListeners.clear();
+  }
+}
+
+// src/templates/react-template.generated.ts
+var REACT_TEMPLATE;
+var init_react_template_generated = __esm(() => {
+  REACT_TEMPLATE = {
+    "index.html": `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title><%= it.projectName %> — Dev Sandbox</title>
+    <style>
+      body {
+        margin: 0;
+        padding-top: 40px;
+      }
+      #dev-toolbar {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 40px;
+        background: #1a1a2e;
+        display: flex;
+        align-items: center;
+        padding: 0 16px;
+        gap: 16px;
+        z-index: 99999;
+        font-family: system-ui, -apple-system, sans-serif;
+        font-size: 13px;
+      }
+      #dev-toolbar .toolbar-label {
+        color: #a78bfa;
+        font-weight: 600;
+        letter-spacing: 0.02em;
+      }
+      #dev-toolbar .toolbar-hint {
+        color: #6b7280;
+        margin-left: auto;
+      }
+      #dev-toolbar button {
+        background: #2d2d44;
+        color: #e5e7eb;
+        border: 1px solid #3f3f5c;
+        border-radius: 4px;
+        padding: 4px 12px;
+        cursor: pointer;
+        font-size: 13px;
+        font-family: inherit;
+      }
+      #dev-toolbar button:hover {
+        background: #3f3f5c;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="dev-toolbar">
+      <span class="toolbar-label">Dev Sandbox</span>
+      <button id="theme-toggle">Theme: light</button>
+      <span class="toolbar-hint">Bridge calls logged to console</span>
+    </div>
+    <<%= it.projectName %> id="app"></<%= it.projectName %>>
+    <script type="module">
+      import "./src/main.tsx";
+      import { mockBridge } from "./src/mock-bridge.ts";
+
+      let currentTheme = "light";
+      const app = document.getElementById("app");
+      app.bridge = mockBridge;
+
+      document.getElementById("theme-toggle").addEventListener("click", () => {
+        currentTheme = currentTheme === "light" ? "dark" : "light";
+        document.getElementById("theme-toggle").textContent = \`Theme: \${currentTheme}\`;
+
+        const original = mockBridge.theme.current;
+        mockBridge.theme.current = () => currentTheme;
+
+        if (mockBridge.events && mockBridge.events.emit) {
+          mockBridge.events.emit("theme-changed", { theme: currentTheme });
+        }
+
+        // Re-assign bridge to trigger re-render
+        app.bridge = mockBridge;
+      });
+    </script>
+  </body>
+</html>
+`,
+    "manifest.json": `{
+  "id": "<%= it.projectName %>",
+  "version": "0.0.1",
+  "framework": "react",
+  "permissions": [],
+  "description": "A vibe-coded mini-app."
+}
+`,
+    "package.json": `{
+  "name": "<%= it.projectName %>",
+  "private": true,
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "validate": "vibe-kit validate"
+  },
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@aiworkbench/vibe-types": "^0.0.4"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.3.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "typescript": "^5.7.0",
+    "vite": "^6.0.0"
+  }
+}
+`,
+    "src/App.tsx": `import type { VibeProps } from "@aiworkbench/vibe-types";
+
+export default function App({ bridge }: VibeProps) {
+  const user = bridge.auth?.getUser();
+
+  return (
+    <div style={{ padding: "2rem", fontFamily: "system-ui" }}>
+      <h1>Hello, {user?.name ?? "Developer"}!</h1>
+      <p>This is your vibe-coded mini-app.</p>
+      <button onClick={() => bridge.toast?.show("It works!")}>
+        Show Toast
+      </button>
+    </div>
+  );
+}
+`,
+    "src/main.tsx": `import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+
+class VibeElement extends HTMLElement {
+  private _bridge: any;
+  private _root: ReactDOM.Root | null = null;
+
+  set bridge(value: any) {
+    this._bridge = value;
+    this.render();
+  }
+
+  connectedCallback() {
+    const shadow = this.attachShadow({ mode: "open" });
+    const container = document.createElement("div");
+    shadow.appendChild(container);
+    this._root = ReactDOM.createRoot(container);
+    this.render();
+  }
+
+  disconnectedCallback() {
+    this._root?.unmount();
+  }
+
+  private render() {
+    if (this._root && this._bridge) {
+      this._root.render(React.createElement(App, { bridge: this._bridge }));
+    }
+  }
+}
+
+if (!customElements.get("<%= it.projectName %>")) {
+  customElements.define("<%= it.projectName %>", VibeElement);
+}
+
+if (import.meta.env.DEV) {
+  const mountDevBridge = () => {
+    const bridge = (window as any).__VIBE_BRIDGE_DEV__;
+    if (bridge) {
+      let rootNode = document.getElementById("root");
+      if (!rootNode) {
+        rootNode = document.createElement("div");
+        rootNode.id = "root";
+        document.body.appendChild(rootNode);
+      }
+      if (rootNode.children.length === 0) {
+        const el = document.createElement("<%= it.projectName %>") as any;
+        el.bridge = bridge;
+        rootNode.appendChild(el);
+      }
+    }
+  };
+
+  if ((window as any).__VIBE_BRIDGE_DEV__) {
+    mountDevBridge();
+  } else {
+    window.addEventListener("vibe-bridge-ready", mountDevBridge);
+  }
+}
+`,
+    "tsconfig.json": `{
+  "compilerOptions": {
+    "target": "es2022",
+    "module": "es2022",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true
+  },
+  "include": ["src"]
+}
+`,
+    "vite.config.ts": `import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+
+export default defineConfig({
+  plugins: [react()],
+  define: {
+    "process.env.NODE_ENV": JSON.stringify("production"),
+  },
+  build: {
+    lib: {
+      entry: "./src/main.tsx",
+      name: "<%= it.projectNamePascal %>",
+      fileName: "index",
+      formats: ["es"],
+    },
+    rollupOptions: {
+      external: ["react", "react-dom", "react-dom/client", "react/jsx-runtime"],
+      output: {
+        globals: {
+          react: "React",
+          "react-dom": "ReactDOM",
+        },
+      },
+    },
+  },
+});
+`
+  };
+});
+
+// src/templates/generated.ts
+function toPascalCase(name) {
+  return name.replace(/[-_]+(.)/g, (_, c) => c.toUpperCase()).replace(/^(.)/, (_, c) => c.toUpperCase());
+}
+function resolveVars(templateId, vars) {
+  const projectName = vars?.projectName ?? `vibe-${templateId}-app`;
+  const projectNamePascal = vars?.projectNamePascal ?? toPascalCase(projectName);
+  return {
+    projectName,
+    projectNamePascal,
+    permissions: vars?.permissions,
+    description: vars?.description
+  };
+}
+function renderEta(template, vars) {
+  return template.replace(/<%= it\.projectName %>/g, vars.projectName).replace(/<%= it\.projectNamePascal %>/g, vars.projectNamePascal);
+}
+function buildIdeIndexHtml(templateId) {
+  const mainEntry = templateId === "react" ? "/src/main.tsx" : "/src/main.ts";
+  return `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vibe IDE Draft</title>
+  </head>
+  <body style="margin: 0;">
+    <div id="root"></div>
+    <script type="module" src="${mainEntry}"></script>
+  </body>
+</html>`;
+}
+function injectBridgePlugin(viteConfig) {
+  const pluginsMatch = viteConfig.match(/plugins:\s*\[([^\]]+)\]/s);
+  if (pluginsMatch?.[1]) {
+    const existing = pluginsMatch[1].trimEnd();
+    const normalized = existing.endsWith(",") ? existing : existing + ",";
+    return viteConfig.replace(pluginsMatch[0], `plugins: [
+    ${normalized.trim()}
+${BRIDGE_INJECTOR_PLUGIN}
+  ]`);
+  }
+  return viteConfig.replace(/defineConfig\(\{/, `defineConfig({
+  plugins: [
+${BRIDGE_INJECTOR_PLUGIN}
+  ],`);
+}
+function overrideManifestPermissions(rendered, permissions) {
+  const manifest = JSON.parse(rendered);
+  manifest.permissions = permissions;
+  return JSON.stringify(manifest, null, 2);
+}
+function toFileSystemTree(files) {
+  const tree = {};
+  for (const [path, content] of Object.entries(files)) {
+    const parts = path.split("/");
+    if (parts.length === 1) {
+      tree[path] = { file: { contents: content } };
+    } else {
+      let current = tree;
+      for (let i = 0;i < parts.length - 1; i++) {
+        const dir = parts[i];
+        if (!current[dir]) {
+          current[dir] = { directory: {} };
+        }
+        current = current[dir].directory;
+      }
+      current[parts[parts.length - 1]] = { file: { contents: content } };
+    }
+  }
+  return tree;
+}
+function buildReactTree(vars) {
+  const rendered = {};
+  for (const [path, content] of Object.entries(REACT_TEMPLATE)) {
+    rendered[path] = renderEta(content, vars);
+  }
+  rendered["index.html"] = buildIdeIndexHtml("react");
+  rendered["vite.config.ts"] = injectBridgePlugin(rendered["vite.config.ts"]);
+  rendered["manifest.json"] = overrideManifestPermissions(rendered["manifest.json"], vars.permissions ?? ["toast"]);
+  return toFileSystemTree(rendered);
+}
+function buildVueTree(vars) {
+  const vueApp = `<script setup lang="ts">
+import type { Bridge } from "@aiworkbench/vibe-types";
+
+const props = defineProps<{ bridge: Bridge }>();
+
+const user = props.bridge.auth?.getUser();
+</script>
+
+<template>
+  <div style="padding: 2rem; font-family: system-ui">
+    <h1>Hello, {{ user?.name ?? "Developer" }}!</h1>
+    <p>This is your vibe-coded mini-app.</p>
+    <button @click="props.bridge.toast?.show('It works!')">Show Toast</button>
+  </div>
+</template>
+`;
+  const vueMain = `import { defineCustomElement } from "vue";
+import App from "./App.vue";
+
+const VibeElement = defineCustomElement(App, {
+  shadowRoot: true,
+});
+
+if (!customElements.get("${vars.projectName}")) {
+  customElements.define("${vars.projectName}", VibeElement);
+}
+
+if (import.meta.env.DEV) {
+  const mountDevBridge = () => {
+    const bridge = (window as any).__VIBE_BRIDGE_DEV__;
+    if (bridge) {
+      let rootNode = document.getElementById("root");
+      if (!rootNode) {
+        rootNode = document.createElement("div");
+        rootNode.id = "root";
+        document.body.appendChild(rootNode);
+      }
+      if (rootNode.children.length === 0) {
+        const el = document.createElement("${vars.projectName}") as any;
+        el.bridge = bridge;
+        rootNode.appendChild(el);
+      }
+    }
+  };
+
+  if ((window as any).__VIBE_BRIDGE_DEV__) {
+    mountDevBridge();
+  } else {
+    window.addEventListener("vibe-bridge-ready", mountDevBridge);
+  }
+}
+`;
+  const viteConfig = `import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    {
+      name: "vibe-dev-bridge-injector",
+      apply: "serve",
+      transformIndexHtml(html) {
+        return html.replace(
+          "</head>",
+          '    <script type="module" src="/.ide/vibe-bridge-dev.js"></script>\\n  </head>',
+        );
+      },
+    },
+  ],
+  define: {
+    "process.env.NODE_ENV": JSON.stringify("production"),
+  },
+  build: {
+    lib: {
+      entry: "./src/main.ts",
+      name: "${vars.projectNamePascal}",
+      fileName: "index",
+      formats: ["es"],
+    },
+    rollupOptions: {
+      external: ["vue"],
+      output: {
+        globals: {
+          vue: "Vue",
+        },
+      },
+    },
+  },
+});
+`;
+  return {
+    "package.json": {
+      file: {
+        contents: JSON.stringify({
+          name: vars.projectName,
+          private: true,
+          version: "0.0.1",
+          type: "module",
+          scripts: { dev: "vite", build: "vite build", preview: "vite preview", validate: "vibe-kit validate" },
+          dependencies: { vue: "^3.5.0", "@aiworkbench/vibe-types": "^0.0.4" },
+          devDependencies: { "@vitejs/plugin-vue": "^5.2.0", typescript: "^5.7.0", vite: "^6.0.0" }
+        }, null, 2)
+      }
+    },
+    "manifest.json": {
+      file: {
+        contents: JSON.stringify({ id: vars.projectName, version: "0.0.1", framework: "vue", permissions: vars.permissions ?? ["toast"], description: vars.description ?? "A vibe-coded mini-app." }, null, 2)
+      }
+    },
+    "index.html": { file: { contents: buildIdeIndexHtml("vue") } },
+    "vite.config.ts": { file: { contents: viteConfig } },
+    "tsconfig.json": {
+      file: {
+        contents: JSON.stringify({ compilerOptions: { target: "es2022", module: "es2022", moduleResolution: "bundler", strict: true, esModuleInterop: true, skipLibCheck: true, resolveJsonModule: true }, include: ["src"] }, null, 2)
+      }
+    },
+    src: {
+      directory: {
+        "App.vue": { file: { contents: vueApp } },
+        "main.ts": { file: { contents: vueMain } }
+      }
+    }
+  };
+}
+function buildVanillaTree(vars) {
+  const mainTs = `import type { Bridge } from "@aiworkbench/vibe-types";
+
+class VibeElement extends HTMLElement {
+  private _bridge: Bridge | null = null;
+  private _shadow: ShadowRoot;
+
+  constructor() {
+    super();
+    this._shadow = this.attachShadow({ mode: "open" });
+  }
+
+  set bridge(value: Bridge) {
+    this._bridge = value;
+    this.render();
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  private render() {
+    if (!this._bridge) return;
+
+    const user = this._bridge.auth?.getUser();
+    const bridge = this._bridge;
+
+    this._shadow.innerHTML = \`
+      <style>
+        :host {
+          display: block;
+          font-family: system-ui, sans-serif;
+          padding: 2rem;
+        }
+        button {
+          cursor: pointer;
+          padding: 0.5rem 1rem;
+          border: 1px solid #ccc;
+          border-radius: 4px;
+          background: #fff;
+        }
+        button:hover {
+          background: #f0f0f0;
+        }
+      </style>
+      <h1>Hello, <span id="user-name"></span>!</h1>
+      <p>This is your vibe-coded mini-app.</p>
+      <button id="toast-btn">Show Toast</button>
+    \`;
+
+    const nameEl = this._shadow.getElementById("user-name");
+    if (nameEl) nameEl.textContent = user?.name ?? "Developer";
+
+    this._shadow
+      .getElementById("toast-btn")
+      ?.addEventListener("click", () => bridge.toast?.show("It works!"));
+  }
+}
+
+if (!customElements.get("${vars.projectName}")) {
+  customElements.define("${vars.projectName}", VibeElement);
+}
+
+if (import.meta.env.DEV) {
+  const mountDevBridge = () => {
+    const bridge = (window as any).__VIBE_BRIDGE_DEV__;
+    if (bridge) {
+      let rootNode = document.getElementById("root");
+      if (!rootNode) {
+        rootNode = document.createElement("div");
+        rootNode.id = "root";
+        document.body.appendChild(rootNode);
+      }
+      if (rootNode.children.length === 0) {
+        const el = document.createElement("${vars.projectName}") as any;
+        el.bridge = bridge;
+        rootNode.appendChild(el);
+      }
+    }
+  };
+
+  if ((window as any).__VIBE_BRIDGE_DEV__) {
+    mountDevBridge();
+  } else {
+    window.addEventListener("vibe-bridge-ready", mountDevBridge);
+  }
+}
+`;
+  const viteConfig = `import { defineConfig } from "vite";
+
+export default defineConfig({
+  plugins: [
+    {
+      name: "vibe-dev-bridge-injector",
+      apply: "serve",
+      transformIndexHtml(html) {
+        return html.replace(
+          "</head>",
+          '    <script type="module" src="/.ide/vibe-bridge-dev.js"></script>\\n  </head>',
+        );
+      },
+    },
+  ],
+  define: {
+    "process.env.NODE_ENV": JSON.stringify("production"),
+  },
+  build: {
+    lib: {
+      entry: "./src/main.ts",
+      name: "${vars.projectNamePascal}",
+      fileName: "index",
+      formats: ["es"],
+    },
+  },
+});
+`;
+  return {
+    "package.json": {
+      file: {
+        contents: JSON.stringify({
+          name: vars.projectName,
+          private: true,
+          version: "0.0.1",
+          type: "module",
+          scripts: { dev: "vite", build: "vite build", preview: "vite preview", validate: "vibe-kit validate" },
+          dependencies: { "@aiworkbench/vibe-types": "^0.0.4" },
+          devDependencies: { typescript: "^5.7.0", vite: "^6.0.0" }
+        }, null, 2)
+      }
+    },
+    "manifest.json": {
+      file: {
+        contents: JSON.stringify({ id: vars.projectName, version: "0.0.1", framework: "vanilla", permissions: vars.permissions ?? ["toast"], description: vars.description ?? "A vibe-coded mini-app." }, null, 2)
+      }
+    },
+    "index.html": { file: { contents: buildIdeIndexHtml("vanilla") } },
+    "vite.config.ts": { file: { contents: viteConfig } },
+    "tsconfig.json": {
+      file: {
+        contents: JSON.stringify({ compilerOptions: { target: "es2022", module: "es2022", moduleResolution: "bundler", strict: true, esModuleInterop: true, skipLibCheck: true, resolveJsonModule: true }, include: ["src"] }, null, 2)
+      }
+    },
+    src: {
+      directory: {
+        "main.ts": { file: { contents: mainTs } }
+      }
+    }
+  };
+}
+function getVibeIdeTemplateTree(templateId, templateVars) {
+  const vars = resolveVars(templateId, templateVars);
+  switch (templateId) {
+    case "react":
+      return buildReactTree(vars);
+    case "vue":
+      return buildVueTree(vars);
+    case "vanilla":
+      return buildVanillaTree(vars);
+  }
+}
+var BRIDGE_INJECTOR_PLUGIN = `    {
+      name: "vibe-dev-bridge-injector",
+      apply: "serve",
+      transformIndexHtml(html) {
+        return html.replace(
+          "</head>",
+          '    <script type="module" src="/.ide/vibe-bridge-dev.js"></script>\\n  </head>',
+        );
+      },
+    },`;
+var init_generated = __esm(() => {
+  init_react_template_generated();
+});
+
+// src/core/local-snapshot-cache.ts
+function openDB() {
+  if (dbPromise)
+    return dbPromise;
+  dbPromise = new Promise((resolve, reject) => {
+    const request = indexedDB.open(DB_NAME, DB_VERSION);
+    request.onupgradeneeded = () => {
+      const db = request.result;
+      if (!db.objectStoreNames.contains(STORE_NAME)) {
+        const store = db.createObjectStore(STORE_NAME, { keyPath: "draftId" });
+        store.createIndex("savedAt", "savedAt", { unique: false });
+      }
+    };
+    request.onsuccess = () => {
+      const db = request.result;
+      evictStaleSnapshots(db).catch(() => {});
+      resolve(db);
+    };
+    request.onerror = () => {
+      dbPromise = null;
+      reject(request.error);
+    };
+    request.onblocked = () => {
+      dbPromise = null;
+      reject(new Error("IndexedDB blocked — close other tabs using the IDE"));
+    };
+  });
+  return dbPromise;
+}
+function withStore(mode, fn) {
+  return openDB().then((db) => new Promise((resolve, reject) => {
+    const tx = db.transaction(STORE_NAME, mode);
+    const store = tx.objectStore(STORE_NAME);
+    const req = fn(store);
+    req.onsuccess = () => resolve(req.result);
+    req.onerror = () => reject(req.error);
+  }));
+}
+async function saveLocalSnapshot(draftId, tree, meta) {
+  const record = {
+    draftId,
+    tree,
+    treeHash: meta.treeHash,
+    installFingerprint: meta.installFingerprint,
+    revisionId: meta.revisionId,
+    chatHistory: meta.chatHistory,
+    savedAt: Date.now()
+  };
+  await withStore("readwrite", (store) => store.put(record));
+}
+async function loadLocalSnapshot(draftId) {
+  const result = await withStore("readonly", (store) => store.get(draftId));
+  return result ?? null;
+}
+async function deleteLocalSnapshot(draftId) {
+  await withStore("readwrite", (store) => store.delete(draftId));
+}
+async function hasNewerLocalSnapshot(draftId, remoteSavedAt) {
+  const record = await loadLocalSnapshot(draftId);
+  if (!record)
+    return false;
+  const remoteTs = typeof remoteSavedAt === "string" ? new Date(remoteSavedAt).getTime() : remoteSavedAt;
+  return record.savedAt > remoteTs;
+}
+async function getLocalSnapshotTimestamp(draftId) {
+  const record = await loadLocalSnapshot(draftId);
+  return record?.savedAt ?? null;
+}
+async function listLocalSnapshots() {
+  const db = await openDB();
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction(STORE_NAME, "readonly");
+    const store = tx.objectStore(STORE_NAME);
+    const req = store.getAll();
+    req.onsuccess = () => {
+      const records = req.result;
+      resolve(records.map((r) => ({
+        draftId: r.draftId,
+        savedAt: r.savedAt,
+        treeHash: r.treeHash
+      })));
+    };
+    req.onerror = () => reject(req.error);
+  });
+}
+async function evictStaleSnapshots(db) {
+  const cutoff = Date.now() - MAX_AGE_MS;
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction(STORE_NAME, "readwrite");
+    const store = tx.objectStore(STORE_NAME);
+    const index = store.index("savedAt");
+    const range = IDBKeyRange.upperBound(cutoff);
+    const req = index.openCursor(range);
+    req.onsuccess = () => {
+      const cursor = req.result;
+      if (cursor) {
+        cursor.delete();
+        cursor.continue();
+      }
+    };
+    tx.oncomplete = () => resolve();
+    tx.onerror = () => reject(tx.error);
+  });
+}
+async function evictStaleLocalSnapshots() {
+  const db = await openDB();
+  return evictStaleSnapshots(db);
+}
+async function clearAllLocalSnapshots() {
+  await withStore("readwrite", (store) => store.clear());
+}
+var DB_NAME = "vibe-ide-snapshots", DB_VERSION = 1, STORE_NAME = "drafts", MAX_AGE_MS, dbPromise = null;
+var init_local_snapshot_cache = __esm(() => {
+  MAX_AGE_MS = 7 * 24 * 60 * 60 * 1000;
+});
+
+// src/react/use-autosave.ts
+import { useCallback, useEffect, useRef, useState } from "react";
+function useAutosave({
+  draftId,
+  instance,
+  coalescer,
+  enabled = true,
+  persistence,
+  saveMeta
+}) {
+  const [isDirty, setIsDirty] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+  const [lastSavedAt, setLastSavedAt] = useState(null);
+  const [lastError, setLastError] = useState(null);
+  const [remoteSaveStatus, setRemoteSaveStatus] = useState("idle");
+  const [revisionId, setRevisionId] = useState(null);
+  const saveTimerRef = useRef(null);
+  const remoteSaveTimerRef = useRef(null);
+  const isSavingRef = useRef(false);
+  const isRemoteSavingRef = useRef(false);
+  const pendingSaveRef = useRef(false);
+  const pendingRemoteSaveRef = useRef(false);
+  const isDirtyRef = useRef(false);
+  const revisionIdRef = useRef(null);
+  const saveMetaRef = useRef(saveMeta);
+  useEffect(() => {
+    isDirtyRef.current = isDirty;
+  }, [isDirty]);
+  useEffect(() => {
+    saveMetaRef.current = saveMeta;
+  }, [saveMeta]);
+  const doLocalSave = useCallback(async () => {
+    if (!instance || !draftId || isSavingRef.current) {
+      if (isSavingRef.current) {
+        pendingSaveRef.current = true;
+      }
+      return;
+    }
+    isSavingRef.current = true;
+    setIsSaving(true);
+    setLastError(null);
+    try {
+      const tree = await readFileTree(instance);
+      await saveLocalSnapshot(draftId, tree, {
+        savedAt: Date.now(),
+        revisionId: revisionIdRef.current ?? undefined,
+        ...saveMetaRef.current
+      });
+      setIsDirty(false);
+      isDirtyRef.current = false;
+      setLastSavedAt(Date.now());
+    } catch (e) {
+      const error = e instanceof Error ? e : new Error(String(e));
+      setLastError(error);
+      console.error("useAutosave: local save failed", error);
+    } finally {
+      isSavingRef.current = false;
+      setIsSaving(false);
+      if (pendingSaveRef.current) {
+        pendingSaveRef.current = false;
+        window.setTimeout(doLocalSave, 200);
+      }
+    }
+  }, [instance, draftId]);
+  const doRemoteSave = useCallback(async () => {
+    if (!instance || !draftId || !persistence?.saveDraft || isRemoteSavingRef.current) {
+      if (isRemoteSavingRef.current) {
+        pendingRemoteSaveRef.current = true;
+      }
+      return;
+    }
+    isRemoteSavingRef.current = true;
+    setRemoteSaveStatus("saving");
+    try {
+      const tree = await readFileTree(instance);
+      const result = await persistence.saveDraft(draftId, {
+        tree,
+        meta: {
+          revisionId: revisionIdRef.current ?? undefined,
+          savedAt: Date.now(),
+          ...saveMetaRef.current
+        }
+      });
+      if (result.revisionId) {
+        revisionIdRef.current = result.revisionId;
+        setRevisionId(result.revisionId);
+      }
+      setRemoteSaveStatus("saved");
+    } catch (e) {
+      console.error("useAutosave: remote save failed", e);
+      setRemoteSaveStatus("error");
+    } finally {
+      isRemoteSavingRef.current = false;
+      if (pendingRemoteSaveRef.current) {
+        pendingRemoteSaveRef.current = false;
+        window.setTimeout(doRemoteSave, 500);
+      }
+    }
+  }, [instance, draftId, persistence]);
+  const doSave = useCallback(async () => {
+    await doLocalSave();
+    if (persistence?.saveDraft) {
+      doRemoteSave().catch(() => {});
+    }
+  }, [doLocalSave, doRemoteSave, persistence]);
+  const scheduleSave = useCallback(() => {
+    if (saveTimerRef.current !== null) {
+      window.clearTimeout(saveTimerRef.current);
+    }
+    saveTimerRef.current = window.setTimeout(() => {
+      saveTimerRef.current = null;
+      doLocalSave();
+    }, LOCAL_SAVE_IDLE_MS);
+    if (persistence?.saveDraft) {
+      if (remoteSaveTimerRef.current !== null) {
+        window.clearTimeout(remoteSaveTimerRef.current);
+      }
+      remoteSaveTimerRef.current = window.setTimeout(() => {
+        remoteSaveTimerRef.current = null;
+        doRemoteSave();
+      }, REMOTE_SAVE_IDLE_MS);
+    }
+  }, [doLocalSave, doRemoteSave, persistence]);
+  useEffect(() => {
+    if (!coalescer || !enabled)
+      return;
+    const unsub = coalescer.onWrite(() => {
+      setIsDirty(true);
+      isDirtyRef.current = true;
+      scheduleSave();
+    });
+    return () => {
+      unsub();
+      if (saveTimerRef.current !== null) {
+        window.clearTimeout(saveTimerRef.current);
+        saveTimerRef.current = null;
+      }
+      if (remoteSaveTimerRef.current !== null) {
+        window.clearTimeout(remoteSaveTimerRef.current);
+        remoteSaveTimerRef.current = null;
+      }
+    };
+  }, [coalescer, enabled, scheduleSave]);
+  useEffect(() => {
+    if (!isDirty)
+      return;
+    const handler = (e) => {
+      e.preventDefault();
+      e.returnValue = "";
+    };
+    window.addEventListener("beforeunload", handler);
+    return () => window.removeEventListener("beforeunload", handler);
+  }, [isDirty]);
+  useEffect(() => {
+    if (!enabled)
+      return;
+    const handleVisibilityChange = () => {
+      if (document.visibilityState === "hidden" && isDirtyRef.current) {
+        if (saveTimerRef.current !== null) {
+          window.clearTimeout(saveTimerRef.current);
+          saveTimerRef.current = null;
+        }
+        if (remoteSaveTimerRef.current !== null) {
+          window.clearTimeout(remoteSaveTimerRef.current);
+          remoteSaveTimerRef.current = null;
+        }
+        doSave();
+      }
+    };
+    const handlePageHide = () => {
+      if (isDirtyRef.current) {
+        doSave();
+      }
+    };
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+    window.addEventListener("pagehide", handlePageHide);
+    return () => {
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+      window.removeEventListener("pagehide", handlePageHide);
+    };
+  }, [enabled, doSave]);
+  const saveNow = useCallback(async () => {
+    if (saveTimerRef.current !== null) {
+      window.clearTimeout(saveTimerRef.current);
+      saveTimerRef.current = null;
+    }
+    if (remoteSaveTimerRef.current !== null) {
+      window.clearTimeout(remoteSaveTimerRef.current);
+      remoteSaveTimerRef.current = null;
+    }
+    await doSave();
+  }, [doSave]);
+  useEffect(() => {
+    if (!persistence?.loadDraft || !draftId)
+      return;
+    let cancelled = false;
+    (async () => {
+      try {
+        const loaded = await persistence.loadDraft(draftId);
+        if (!cancelled && loaded?.meta.revisionId) {
+          revisionIdRef.current = loaded.meta.revisionId;
+          setRevisionId(loaded.meta.revisionId);
+        }
+      } catch {}
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [draftId]);
+  return {
+    isDirty,
+    isSaving,
+    lastSavedAt,
+    lastError,
+    saveNow,
+    remoteSaveStatus,
+    revisionId
+  };
+}
+var LOCAL_SAVE_IDLE_MS = 2000, REMOTE_SAVE_IDLE_MS = 15000;
+var init_use_autosave = __esm(() => {
+  init_filesystem();
+  init_local_snapshot_cache();
+});
+
+// ../../node_modules/.bun/@webcontainer+api@1.6.1/node_modules/@webcontainer/api/dist/internal/constants.js
+var DEFAULT_EDITOR_ORIGIN = "https://stackblitz.com", STORAGE_TOKENS_NAME = "__wc_api_tokens__";
+
+// ../../node_modules/.bun/@webcontainer+api@1.6.1/node_modules/@webcontainer/api/dist/internal/TypedEventTarget.js
+class TypedEventTarget {
+  _bus = new EventTarget;
+  listen(listener) {
+    function wrappedListener(event) {
+      listener(event.data);
+    }
+    this._bus.addEventListener("message", wrappedListener);
+    return () => this._bus.removeEventListener("message", wrappedListener);
+  }
+  fireEvent(data) {
+    this._bus.dispatchEvent(new MessageEvent("message", { data }));
+  }
+}
+
+// ../../node_modules/.bun/@webcontainer+api@1.6.1/node_modules/@webcontainer/api/dist/internal/tokens.js
+class Tokens {
+  origin;
+  refresh;
+  access;
+  expires;
+  _revoked = new AbortController;
+  constructor(origin, refresh, access, expires) {
+    this.origin = origin;
+    this.refresh = refresh;
+    this.access = access;
+    this.expires = expires;
+  }
+  async activate(onFailedRefresh) {
+    if (this._revoked.signal.aborted) {
+      throw new Error("Token revoked");
+    }
+    if (this.expires < Date.now()) {
+      if (!await this._fetchNewAccessToken()) {
+        return false;
+      }
+    }
+    this._sync();
+    this._startRefreshTokensLoop(onFailedRefresh);
+    return true;
+  }
+  async revoke(clientId, ignoreRevokeError) {
+    this._revoked.abort();
+    try {
+      const response = await fetch(`${this.origin}/oauth/revoke`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/x-www-form-urlencoded"
+        },
+        body: new URLSearchParams({ token: this.refresh, token_type_hint: "refresh_token", client_id: clientId }),
+        mode: "cors"
+      });
+      if (!response.ok) {
+        throw new Error(`Failed to logout`);
+      }
+    } catch (error) {
+      if (!ignoreRevokeError) {
+        throw error;
+      }
+    }
+    clearTokensInStorage();
+  }
+  static fromStorage() {
+    const savedTokens = readTokensFromStorage();
+    if (!savedTokens) {
+      return null;
+    }
+    return new Tokens(savedTokens.origin, savedTokens.refresh, savedTokens.access, savedTokens.expires);
+  }
+  static async fromAuthCode({ editorOrigin, clientId, codeVerifier, authCode, redirectUri }) {
+    const response = await fetch(`${editorOrigin}/oauth/token`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/x-www-form-urlencoded"
+      },
+      body: new URLSearchParams({
+        client_id: clientId,
+        code: authCode,
+        code_verifier: codeVerifier,
+        grant_type: "authorization_code",
+        redirect_uri: redirectUri
+      }),
+      mode: "cors"
+    });
+    if (!response.ok) {
+      throw new Error(`Failed to fetch token: ${response.status}`);
+    }
+    const tokenResponse = await response.json();
+    assertTokenResponse(tokenResponse);
+    const { access_token: access, refresh_token: refresh } = tokenResponse;
+    const expires = getExpiresFromTokenResponse(tokenResponse);
+    return new Tokens(editorOrigin, refresh, access, expires);
+  }
+  async _fetchNewAccessToken() {
+    try {
+      const response = await fetch(`${this.origin}/oauth/token`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/x-www-form-urlencoded"
+        },
+        body: new URLSearchParams({
+          grant_type: "refresh_token",
+          refresh_token: this.refresh
+        }),
+        mode: "cors",
+        signal: this._revoked.signal
+      });
+      if (!response.ok) {
+        throw IGNORED_ERROR;
+      }
+      const tokenResponse = await response.json();
+      assertTokenResponse(tokenResponse);
+      const { access_token: access, refresh_token: refresh } = tokenResponse;
+      const expires = getExpiresFromTokenResponse(tokenResponse);
+      this.access = access;
+      this.expires = expires;
+      this.refresh = refresh;
+      return true;
+    } catch {
+      clearTokensInStorage();
+      return false;
+    }
+  }
+  _sync() {
+    persistTokensInStorage(this);
+    fireAccessTokenChanged(this.access);
+  }
+  async _startRefreshTokensLoop(onFailedRefresh) {
+    while (true) {
+      const expiresIn = this.expires - Date.now() - 1000;
+      await wait(Math.max(expiresIn, 1000));
+      if (this._revoked.signal.aborted) {
+        return;
+      }
+      if (!this._fetchNewAccessToken()) {
+        onFailedRefresh();
+        return;
+      }
+      this._sync();
+    }
+  }
+}
+function clearTokensInStorage() {
+  localStorage.removeItem(STORAGE_TOKENS_NAME);
+}
+function addAccessTokenChangedListener(listener) {
+  return accessTokenChangedListeners.listen(listener);
+}
+function readTokensFromStorage() {
+  const serializedTokens = localStorage.getItem(STORAGE_TOKENS_NAME);
+  if (!serializedTokens) {
+    return null;
+  }
+  try {
+    return JSON.parse(serializedTokens);
+  } catch {
+    return null;
+  }
+}
+function persistTokensInStorage(tokens) {
+  localStorage.setItem(STORAGE_TOKENS_NAME, JSON.stringify(tokens));
+}
+function getExpiresFromTokenResponse({ created_at, expires_in }) {
+  return (created_at + expires_in) * 1000;
+}
+function assertTokenResponse(token) {
+  if (typeof token !== "object" || !token) {
+    throw new Error("Invalid Token Response");
+  }
+  if (typeof token.access_token !== "string" || typeof token.refresh_token !== "string" || typeof token.created_at !== "number" || typeof token.expires_in !== "number") {
+    throw new Error("Invalid Token Response");
+  }
+}
+function wait(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+function fireAccessTokenChanged(accessToken) {
+  accessTokenChangedListeners.fireEvent(accessToken);
+}
+var IGNORED_ERROR, accessTokenChangedListeners;
+var init_tokens = __esm(() => {
+  IGNORED_ERROR = new Error;
+  IGNORED_ERROR.stack = "";
+  accessTokenChangedListeners = new TypedEventTarget;
+});
+
+// ../../node_modules/.bun/@webcontainer+api@1.6.1/node_modules/@webcontainer/api/dist/internal/iframe-url.js
+var params, editorOrigin = null, iframeSettings;
+var init_iframe_url = __esm(() => {
+  params = {};
+  iframeSettings = {
+    get editorOrigin() {
+      if (editorOrigin == null) {
+        editorOrigin = new URL(globalThis.WEBCONTAINER_API_IFRAME_URL ?? DEFAULT_EDITOR_ORIGIN).origin;
+      }
+      return editorOrigin;
+    },
+    set editorOrigin(newOrigin) {
+      editorOrigin = new URL(newOrigin).origin;
+    },
+    setQueryParam(key, value) {
+      params[key] = value;
+    },
+    get url() {
+      const url = new URL(this.editorOrigin);
+      url.pathname = "/headless";
+      for (const param in params) {
+        url.searchParams.set(param, params[param]);
+      }
+      url.searchParams.set("version", "1.6.1");
+      return url;
+    }
+  };
+});
+// ../../node_modules/.bun/@webcontainer+api@1.6.1/node_modules/@webcontainer/api/dist/internal/reset-promise.js
+function resettablePromise() {
+  let resolve;
+  let promise;
+  function reset() {
+    promise = new Promise((_resolve) => resolve = _resolve);
+  }
+  reset();
+  return {
+    get promise() {
+      return promise;
+    },
+    resolve(value) {
+      return resolve(value);
+    },
+    reset
+  };
+}
+
+// ../../node_modules/.bun/@webcontainer+api@1.6.1/node_modules/@webcontainer/api/dist/internal/auth-state.js
+function assertAuthTokens(tokens) {
+  if (!tokens) {
+    throw new Error("Oops! Tokens is not defined when it always should be.");
+  }
+}
+var authState, authFailedListeners, loggedOutListeners;
+var init_auth_state = __esm(() => {
+  init_tokens();
+  init_iframe_url();
+  authState = {
+    initialized: false,
+    bootCalled: false,
+    authComplete: resettablePromise(),
+    clientId: "",
+    oauthScope: "",
+    broadcastChannel: null,
+    get editorOrigin() {
+      return iframeSettings.editorOrigin;
+    },
+    tokens: null
+  };
+  authFailedListeners = new TypedEventTarget;
+  loggedOutListeners = new TypedEventTarget;
+});
+
+// ../../node_modules/.bun/@webcontainer+api@1.6.1/node_modules/@webcontainer/api/dist/preview-message-types.js
+var PreviewMessageType;
+var init_preview_message_types = __esm(() => {
+  (function(PreviewMessageType2) {
+    PreviewMessageType2["UncaughtException"] = "PREVIEW_UNCAUGHT_EXCEPTION";
+    PreviewMessageType2["UnhandledRejection"] = "PREVIEW_UNHANDLED_REJECTION";
+    PreviewMessageType2["ConsoleError"] = "PREVIEW_CONSOLE_ERROR";
+  })(PreviewMessageType || (PreviewMessageType = {}));
+});
+
+// ../../node_modules/.bun/@webcontainer+api@1.6.1/node_modules/@webcontainer/api/dist/vendor/index.js
+function expose(obj, ep = self) {
+  ep.addEventListener("message", function callback(ev) {
+    if (!ev || !ev.data) {
+      return;
+    }
+    const { id, type, path } = Object.assign({ path: [] }, ev.data);
+    const argumentList = (ev.data.argumentList || []).map(fromWireValue);
+    let returnValue;
+    try {
+      const parent = path.slice(0, -1).reduce((obj2, prop) => obj2[prop], obj);
+      const rawValue = path.reduce((obj2, prop) => obj2[prop], obj);
+      switch (type) {
+        case 0:
+          {
+            returnValue = rawValue;
+          }
+          break;
+        case 1:
+          {
+            parent[path.slice(-1)[0]] = fromWireValue(ev.data.value);
+            returnValue = true;
+          }
+          break;
+        case 2:
+          {
+            returnValue = rawValue.apply(parent, argumentList);
+          }
+          break;
+        case 3:
+          {
+            const value = new rawValue(...argumentList);
+            returnValue = proxy(value);
+          }
+          break;
+        case 4:
+          {
+            const { port1, port2 } = new MessageChannel;
+            expose(obj, port2);
+            returnValue = transfer(port1, [port1]);
+          }
+          break;
+        case 5:
+          {
+            returnValue = undefined;
+          }
+          break;
+      }
+    } catch (value) {
+      returnValue = { value, [throwMarker]: 0 };
+    }
+    Promise.resolve(returnValue).catch((value) => {
+      return { value, [throwMarker]: 0 };
+    }).then((returnValue2) => {
+      const [wireValue, transferables] = toWireValue(returnValue2);
+      ep.postMessage(Object.assign(Object.assign({}, wireValue), { id }), transferables);
+      if (type === 5) {
+        ep.removeEventListener("message", callback);
+        closeEndPoint(ep);
+      }
+    });
+  });
+  if (ep.start) {
+    ep.start();
+  }
+}
+function isMessagePort(endpoint) {
+  return endpoint.constructor.name === "MessagePort";
+}
+function closeEndPoint(endpoint) {
+  if (isMessagePort(endpoint))
+    endpoint.close();
+}
+function wrap(ep, target) {
+  return createProxy(ep, [], target);
+}
+function throwIfProxyReleased(isReleased) {
+  if (isReleased) {
+    throw new Error("Proxy has been released and is not useable");
+  }
+}
+function createProxy(ep, path = [], target = function() {}) {
+  let isProxyReleased = false;
+  const proxy2 = new Proxy(target, {
+    get(_target, prop) {
+      throwIfProxyReleased(isProxyReleased);
+      if (prop === releaseProxy) {
+        return () => {
+          return requestResponseMessage(ep, {
+            type: 5,
+            path: path.map((p) => p.toString())
+          }).then(() => {
+            closeEndPoint(ep);
+            isProxyReleased = true;
+          });
+        };
+      }
+      if (prop === "then") {
+        if (path.length === 0) {
+          return { then: () => proxy2 };
+        }
+        const r = requestResponseMessage(ep, {
+          type: 0,
+          path: path.map((p) => p.toString())
+        }).then(fromWireValue);
+        return r.then.bind(r);
+      }
+      return createProxy(ep, [...path, prop]);
+    },
+    set(_target, prop, rawValue) {
+      throwIfProxyReleased(isProxyReleased);
+      const [value, transferables] = toWireValue(rawValue);
+      return requestResponseMessage(ep, {
+        type: 1,
+        path: [...path, prop].map((p) => p.toString()),
+        value
+      }, transferables).then(fromWireValue);
+    },
+    apply(_target, _thisArg, rawArgumentList) {
+      throwIfProxyReleased(isProxyReleased);
+      const last = path[path.length - 1];
+      if (last === createEndpoint) {
+        return requestResponseMessage(ep, {
+          type: 4
+        }).then(fromWireValue);
+      }
+      if (last === "bind") {
+        return createProxy(ep, path.slice(0, -1));
+      }
+      const [argumentList, transferables] = processArguments(rawArgumentList);
+      return requestResponseMessage(ep, {
+        type: 2,
+        path: path.map((p) => p.toString()),
+        argumentList
+      }, transferables).then(fromWireValue);
+    },
+    construct(_target, rawArgumentList) {
+      throwIfProxyReleased(isProxyReleased);
+      const [argumentList, transferables] = processArguments(rawArgumentList);
+      return requestResponseMessage(ep, {
+        type: 3,
+        path: path.map((p) => p.toString()),
+        argumentList
+      }, transferables).then(fromWireValue);
+    }
+  });
+  return proxy2;
+}
+function myFlat(arr) {
+  return Array.prototype.concat.apply([], arr);
+}
+function processArguments(argumentList) {
+  const processed = argumentList.map(toWireValue);
+  return [processed.map((v) => v[0]), myFlat(processed.map((v) => v[1]))];
+}
+function transfer(obj, transfers) {
+  transferCache.set(obj, transfers);
+  return obj;
+}
+function proxy(obj) {
+  return Object.assign(obj, { [proxyMarker]: true });
+}
+function windowEndpoint(w, context = self, targetOrigin = "*") {
+  return {
+    postMessage: (msg, transferables) => w.postMessage(msg, targetOrigin, transferables),
+    addEventListener: context.addEventListener.bind(context),
+    removeEventListener: context.removeEventListener.bind(context)
+  };
+}
+function toWireValue(value) {
+  for (const [name, handler] of transferHandlers) {
+    if (handler.canHandle(value)) {
+      const [serializedValue, transferables] = handler.serialize(value);
+      return [
+        {
+          type: 3,
+          name,
+          value: serializedValue
+        },
+        transferables
+      ];
+    }
+  }
+  return [
+    {
+      type: 0,
+      value
+    },
+    transferCache.get(value) || []
+  ];
+}
+function fromWireValue(value) {
+  switch (value.type) {
+    case 3:
+      return transferHandlers.get(value.name).deserialize(value.value);
+    case 0:
+      return value.value;
+  }
+}
+function requestResponseMessage(ep, msg, transfers) {
+  return new Promise((resolve) => {
+    const id = generateUUID();
+    ep.addEventListener("message", function l(ev) {
+      if (!ev.data || !ev.data.id || ev.data.id !== id) {
+        return;
+      }
+      ep.removeEventListener("message", l);
+      resolve(ev.data);
+    });
+    if (ep.start) {
+      ep.start();
+    }
+    ep.postMessage(Object.assign({ id }, msg), transfers);
+  });
+}
+function generateUUID() {
+  return new Array(4).fill(0).map(() => Math.floor(Math.random() * Number.MAX_SAFE_INTEGER).toString(16)).join("-");
+}
+var __defProp2, __export2 = (target, all) => {
+  for (var name in all)
+    __defProp2(target, name, { get: all[name], enumerable: true });
+}, comlink_exports, proxyMarker, createEndpoint, releaseProxy, throwMarker, isObject = (val) => typeof val === "object" && val !== null || typeof val === "function", proxyTransferHandler, throwTransferHandler, transferHandlers, transferCache;
+var init_vendor = __esm(() => {
+  __defProp2 = Object.defineProperty;
+  comlink_exports = {};
+  __export2(comlink_exports, {
+    createEndpoint: () => createEndpoint,
+    expose: () => expose,
+    proxy: () => proxy,
+    proxyMarker: () => proxyMarker,
+    releaseProxy: () => releaseProxy,
+    transfer: () => transfer,
+    transferHandlers: () => transferHandlers,
+    windowEndpoint: () => windowEndpoint,
+    wrap: () => wrap
+  });
+  proxyMarker = Symbol("Comlink.proxy");
+  createEndpoint = Symbol("Comlink.endpoint");
+  releaseProxy = Symbol("Comlink.releaseProxy");
+  throwMarker = Symbol("Comlink.thrown");
+  proxyTransferHandler = {
+    canHandle: (val) => isObject(val) && val[proxyMarker],
+    serialize(obj) {
+      const { port1, port2 } = new MessageChannel;
+      expose(obj, port1);
+      return [port2, [port2]];
+    },
+    deserialize(port) {
+      port.start();
+      return wrap(port);
+    }
+  };
+  throwTransferHandler = {
+    canHandle: (value) => isObject(value) && (throwMarker in value),
+    serialize({ value }) {
+      let serialized;
+      if (value instanceof Error) {
+        serialized = {
+          isError: true,
+          value: {
+            message: value.message,
+            name: value.name,
+            stack: value.stack
+          }
+        };
+      } else {
+        serialized = { isError: false, value };
+      }
+      return [serialized, []];
+    },
+    deserialize(serialized) {
+      if (serialized.isError) {
+        throw Object.assign(new Error(serialized.value.message), serialized.value);
+      }
+      throw serialized.value;
+    }
+  };
+  transferHandlers = /* @__PURE__ */ new Map([
+    ["proxy", proxyTransferHandler],
+    ["throw", throwTransferHandler]
+  ]);
+  transferCache = /* @__PURE__ */ new WeakMap;
+});
+// ../../node_modules/.bun/@webcontainer+api@1.6.1/node_modules/@webcontainer/api/dist/utils/is-preview-message.js
+function isPreviewMessage(data) {
+  if (data == null || typeof data !== "object") {
+    return false;
+  }
+  if (!("type" in data) || !PREVIEW_MESSAGE_TYPES.includes(data.type)) {
+    return false;
+  }
+  return true;
+}
+var PREVIEW_MESSAGE_TYPES;
+var init_is_preview_message = __esm(() => {
+  init_preview_message_types();
+  PREVIEW_MESSAGE_TYPES = [
+    PreviewMessageType.ConsoleError,
+    PreviewMessageType.UncaughtException,
+    PreviewMessageType.UnhandledRejection
+  ];
+});
+
+// ../../node_modules/.bun/@webcontainer+api@1.6.1/node_modules/@webcontainer/api/dist/utils.js
+var init_utils = __esm(() => {
+  init_preview_message_types();
+  init_is_preview_message();
+});
+
+// ../../node_modules/.bun/@webcontainer+api@1.6.1/node_modules/@webcontainer/api/dist/utils/null-prototype.js
+function nullPrototype(source) {
+  const prototype = Object.create(null);
+  if (!source) {
+    return prototype;
+  }
+  return Object.assign(prototype, source);
+}
+
+// ../../node_modules/.bun/@webcontainer+api@1.6.1/node_modules/@webcontainer/api/dist/utils/file-system.js
+function toInternalFileSystemTree(tree) {
+  const newTree = { d: {} };
+  for (const name of Object.keys(tree)) {
+    const entry = tree[name];
+    if ("file" in entry) {
+      if ("symlink" in entry.file) {
+        newTree.d[name] = { f: { l: entry.file.symlink } };
+        continue;
+      }
+      const contents = entry.file.contents;
+      const stringContents = typeof contents === "string" ? contents : binaryDecoder.decode(contents);
+      const binary = typeof contents === "string" ? {} : { b: true };
+      newTree.d[name] = { f: { c: stringContents, ...binary } };
+      continue;
+    }
+    const newEntry = toInternalFileSystemTree(entry.directory);
+    newTree.d[name] = newEntry;
+  }
+  return newTree;
+}
+function toExternalFileSystemTree(tree) {
+  const newTree = nullPrototype();
+  if ("f" in tree) {
+    throw new Error("It is not possible to export a single file in the JSON format.");
+  }
+  if ("d" in tree) {
+    for (const name of Object.keys(tree.d)) {
+      const entry = tree.d[name];
+      if ("d" in entry) {
+        newTree[name] = nullPrototype({
+          directory: toExternalFileSystemTree(entry)
+        });
+      } else if ("f" in entry) {
+        if ("c" in entry.f) {
+          newTree[name] = nullPrototype({
+            file: nullPrototype({
+              contents: entry.f.b ? fromBinaryString(entry.f.c) : entry.f.c
+            })
+          });
+        } else if ("l" in entry.f) {
+          newTree[name] = nullPrototype({
+            file: nullPrototype({
+              symlink: entry.f.l
+            })
+          });
+        }
+      }
+    }
+  }
+  return newTree;
+}
+function fromBinaryString(s) {
+  const encoded = new Uint8Array(s.length);
+  for (let i = 0;i < s.length; i++) {
+    encoded[i] = s[i].charCodeAt(0);
+  }
+  return encoded;
+}
+var binaryDecoder;
+var init_file_system = __esm(() => {
+  binaryDecoder = new TextDecoder("latin1");
+});
+
+// ../../node_modules/.bun/@webcontainer+api@1.6.1/node_modules/@webcontainer/api/dist/index.js
+class WebContainer {
+  _instance;
+  _runtimeInfo;
+  fs;
+  static _instance = null;
+  static _teardownPromise = null;
+  _tornDown = false;
+  _unsubscribeFromTokenChangedListener = () => {};
+  constructor(_instance, fs, previewScript, _runtimeInfo) {
+    this._instance = _instance;
+    this._runtimeInfo = _runtimeInfo;
+    this.fs = new FileSystemAPIClient(fs);
+    if (authState.initialized) {
+      this._unsubscribeFromTokenChangedListener = addAccessTokenChangedListener((accessToken) => {
+        this._instance.setCredentials({ accessToken, editorOrigin: authState.editorOrigin });
+      });
+      (async () => {
+        await authState.authComplete.promise;
+        if (this._tornDown) {
+          return;
+        }
+        assertAuthTokens(authState.tokens);
+        await this._instance.setCredentials({
+          accessToken: authState.tokens.access,
+          editorOrigin: authState.editorOrigin
+        });
+      })().catch((error) => {
+        console.error(error);
+      });
+    }
+  }
+  async spawn(command, optionsOrArgs, options) {
+    let args = [];
+    if (Array.isArray(optionsOrArgs)) {
+      args = optionsOrArgs;
+    } else {
+      options = optionsOrArgs;
+    }
+    let output = undefined;
+    let outputStream = new ReadableStream;
+    if (options?.output !== false) {
+      const result = streamWithPush();
+      output = result.push;
+      outputStream = result.stream;
+    }
+    let stdout = undefined;
+    let stdoutStream;
+    let stderr = undefined;
+    let stderrStream;
+    const wrappedOutput = proxyListener(binaryListener(output));
+    const wrappedStdout = proxyListener(binaryListener(stdout));
+    const wrappedStderr = proxyListener(binaryListener(stderr));
+    const process = await this._instance.run({
+      command,
+      args,
+      cwd: options?.cwd,
+      env: options?.env,
+      terminal: options?.terminal
+    }, wrappedStdout, wrappedStderr, wrappedOutput);
+    return new WebContainerProcessImpl(process, outputStream, stdoutStream, stderrStream);
+  }
+  async export(path, options) {
+    const serializeOptions = {
+      format: options?.format ?? "json",
+      includes: options?.includes,
+      excludes: options?.excludes,
+      external: true
+    };
+    const result = await this._instance.serialize(path, serializeOptions);
+    if (serializeOptions.format === "json") {
+      const data = JSON.parse(decoder.decode(result));
+      return toExternalFileSystemTree(data);
+    }
+    return result;
+  }
+  on(event, listener) {
+    if (event === "preview-message") {
+      const originalListener = listener;
+      listener = (message) => {
+        if (isPreviewMessage(message)) {
+          originalListener(message);
+        }
+      };
+    }
+    const { listener: wrapped, subscribe } = syncSubscription(listener);
+    return subscribe(this._instance.on(event, comlink_exports.proxy(wrapped)));
+  }
+  mount(snapshotOrTree, options) {
+    const payload = snapshotOrTree instanceof Uint8Array ? snapshotOrTree : snapshotOrTree instanceof ArrayBuffer ? new Uint8Array(snapshotOrTree) : encoder.encode(JSON.stringify(toInternalFileSystemTree(snapshotOrTree)));
+    return this._instance.loadFiles(comlink_exports.transfer(payload, [payload.buffer]), {
+      mountPoints: options?.mountPoint
+    });
+  }
+  setPreviewScript(scriptSrc, options) {
+    return this._instance.setPreviewScript(scriptSrc, options);
+  }
+  get path() {
+    return this._runtimeInfo.path;
+  }
+  get workdir() {
+    return this._runtimeInfo.cwd;
+  }
+  teardown() {
+    if (this._tornDown) {
+      throw new Error("WebContainer already torn down");
+    }
+    this._tornDown = true;
+    this._unsubscribeFromTokenChangedListener();
+    const teardownFn = async () => {
+      try {
+        await this.fs._teardown();
+        await this._instance.teardown();
+      } finally {
+        this._instance[comlink_exports.releaseProxy]();
+        if (WebContainer._instance === this) {
+          WebContainer._instance = null;
+        }
+      }
+    };
+    WebContainer._teardownPromise = teardownFn();
+  }
+  static async boot(options = {}) {
+    await this._teardownPromise;
+    WebContainer._teardownPromise = null;
+    const { workdirName } = options;
+    if (window.crossOriginIsolated && options.coep === "none") {
+      console.warn(`A Cross-Origin-Embedder-Policy header is required in cross origin isolated environments.
+Set the 'coep' option to 'require-corp'.`);
+    }
+    if (workdirName?.includes("/") || workdirName === ".." || workdirName === ".") {
+      throw new Error("workdirName should be a valid folder name");
+    }
+    authState.bootCalled = true;
+    while (bootPromise) {
+      await bootPromise;
+    }
+    if (WebContainer._instance) {
+      throw new Error("Only a single WebContainer instance can be booted");
+    }
+    const instancePromise = unsynchronizedBoot(options);
+    bootPromise = instancePromise.catch(() => {});
+    try {
+      const instance = await instancePromise;
+      WebContainer._instance = instance;
+      return instance;
+    } finally {
+      bootPromise = null;
+    }
+  }
+}
+
+class DirEntImpl {
+  name;
+  _type;
+  constructor(name, _type) {
+    this.name = name;
+    this._type = _type;
+  }
+  isFile() {
+    return this._type === DIR_ENTRY_TYPE_FILE;
+  }
+  isDirectory() {
+    return this._type === DIR_ENTRY_TYPE_DIR;
+  }
+}
+
+class FSWatcher {
+  _apiClient;
+  _path;
+  _options;
+  _listener;
+  _wrappedListener;
+  _watcher;
+  _closed = false;
+  constructor(_apiClient, _path, _options, _listener) {
+    this._apiClient = _apiClient;
+    this._path = _path;
+    this._options = _options;
+    this._listener = _listener;
+    this._apiClient._watchers.add(this);
+    this._wrappedListener = (event, filename) => {
+      if (this._listener && !this._closed) {
+        this._listener(event, filename);
+      }
+    };
+    this._apiClient._fs.watch(this._path, this._options, proxyListener(this._wrappedListener)).then((_watcher) => {
+      this._watcher = _watcher;
+      if (this._closed) {
+        return this._teardown();
+      }
+      return;
+    }).catch(console.error);
+  }
+  async close() {
+    if (!this._closed) {
+      this._closed = true;
+      this._apiClient._watchers.delete(this);
+      await this._teardown();
+    }
+  }
+  async _teardown() {
+    await this._watcher?.close().finally(() => {
+      this._watcher?.[comlink_exports.releaseProxy]();
+    });
+  }
+}
+
+class WebContainerProcessImpl {
+  output;
+  input;
+  exit;
+  _process;
+  stdout;
+  stderr;
+  constructor(process, output, stdout, stderr) {
+    this.output = output;
+    this._process = process;
+    this.input = new WritableStream({
+      write: (data) => {
+        this._getProcess()?.write(data).catch(() => {});
+      }
+    });
+    this.exit = this._onExit();
+    this.stdout = stdout;
+    this.stderr = stderr;
+  }
+  kill() {
+    this._process?.kill();
+  }
+  resize(dimensions) {
+    this._getProcess()?.resize(dimensions);
+  }
+  async _onExit() {
+    try {
+      return await this._process.onExit;
+    } finally {
+      this._process?.[comlink_exports.releaseProxy]();
+      this._process = null;
+    }
+  }
+  _getProcess() {
+    if (this._process == null) {
+      console.warn("This process already exited");
+    }
+    return this._process;
+  }
+}
+
+class FileSystemAPIClient {
+  _fs;
+  _watchers = new Set([]);
+  constructor(fs) {
+    this._fs = fs;
+  }
+  rm(...args) {
+    return this._fs.rm(...args);
+  }
+  async readFile(path, encoding) {
+    return await this._fs.readFile(path, encoding);
+  }
+  async rename(oldPath, newPath) {
+    return await this._fs.rename(oldPath, newPath);
+  }
+  async writeFile(path, data, options) {
+    if (data instanceof Uint8Array) {
+      const buffer = data.buffer.slice(data.byteOffset, data.byteOffset + data.byteLength);
+      data = comlink_exports.transfer(new Uint8Array(buffer), [buffer]);
+    }
+    await this._fs.writeFile(path, data, options);
+  }
+  async readdir(path, options) {
+    const result = await this._fs.readdir(path, options);
+    if (isStringArray(result)) {
+      return result;
+    }
+    if (isTypedArrayCollection(result)) {
+      return result;
+    }
+    const entries = result.map((entry) => new DirEntImpl(entry.name, entry["Symbol(type)"]));
+    return entries;
+  }
+  async mkdir(path, options) {
+    return await this._fs.mkdir(path, options);
+  }
+  watch(path, options, listener) {
+    if (typeof options === "function") {
+      listener = options;
+      options = null;
+    }
+    return new FSWatcher(this, path, options, listener);
+  }
+  async _teardown() {
+    this._fs[comlink_exports.releaseProxy]();
+    await Promise.all([...this._watchers].map((watcher) => watcher.close()));
+  }
+}
+async function unsynchronizedBoot(options) {
+  const { serverPromise } = serverFactory(options);
+  const server = await serverPromise;
+  const instance = await server.build({
+    host: window.location.host,
+    version: "1.6.1",
+    workdirName: options.workdirName,
+    forwardPreviewErrors: options.forwardPreviewErrors
+  });
+  const [fs, previewScript, runtimeInfo] = await Promise.all([
+    instance.fs(),
+    instance.previewScript(),
+    instance.runtimeInfo()
+  ]);
+  return new WebContainer(instance, fs, previewScript, runtimeInfo);
+}
+function binaryListener(listener) {
+  if (listener == null) {
+    return;
+  }
+  return (data) => {
+    if (data instanceof Uint8Array) {
+      listener(decoder.decode(data));
+    } else if (data == null) {
+      listener(null);
+    }
+  };
+}
+function proxyListener(listener) {
+  if (listener == null) {
+    return;
+  }
+  return comlink_exports.proxy(listener);
+}
+function serverFactory(options) {
+  if (cachedServerPromise != null) {
+    if (options.coep !== cachedBootOptions.coep) {
+      console.warn(`Attempting to boot WebContainer with 'coep: ${options.coep}'`);
+      console.warn(`First boot had 'coep: ${cachedBootOptions.coep}', new settings will not take effect!`);
+    }
+    return { serverPromise: cachedServerPromise };
+  }
+  if (options.coep) {
+    iframeSettings.setQueryParam("coep", options.coep);
+  }
+  if (options.experimentalNode) {
+    iframeSettings.setQueryParam("experimental_node", "1");
+  }
+  const iframe = document.createElement("iframe");
+  iframe.style.display = "none";
+  iframe.setAttribute("allow", "cross-origin-isolated");
+  const url = iframeSettings.url;
+  iframe.src = url.toString();
+  const { origin } = url;
+  cachedBootOptions = { ...options };
+  cachedServerPromise = new Promise((resolve) => {
+    const onMessage = (event) => {
+      if (event.origin !== origin) {
+        return;
+      }
+      const { data } = event;
+      if (data.type === "init") {
+        resolve(comlink_exports.wrap(event.ports[0]));
+        return;
+      }
+      if (data.type === "warning") {
+        console[data.level].call(console, data.message);
+        return;
+      }
+    };
+    window.addEventListener("message", onMessage);
+  });
+  document.body.insertBefore(iframe, null);
+  return { serverPromise: cachedServerPromise };
+}
+function isStringArray(list) {
+  return typeof list[0] === "string";
+}
+function isTypedArrayCollection(list) {
+  return list[0] instanceof Uint8Array;
+}
+function streamWithPush() {
+  let controller = null;
+  const stream = new ReadableStream({
+    start(controller_) {
+      controller = controller_;
+    }
+  });
+  const push = (item) => {
+    if (item != null) {
+      controller?.enqueue(item);
+    } else {
+      controller?.close();
+      controller = null;
+    }
+  };
+  return { stream, push };
+}
+function syncSubscription(listener) {
+  let stopped = false;
+  let unsubscribe = () => {};
+  const wrapped = (...args) => {
+    if (stopped) {
+      return;
+    }
+    listener(...args);
+  };
+  return {
+    subscribe(promise) {
+      promise.then((unsubscribe_) => {
+        unsubscribe = unsubscribe_;
+        if (stopped) {
+          unsubscribe();
+        }
+      });
+      return () => {
+        stopped = true;
+        unsubscribe();
+      };
+    },
+    listener: wrapped
+  };
+}
+var bootPromise = null, cachedServerPromise = null, cachedBootOptions, decoder, encoder, DIR_ENTRY_TYPE_FILE = 1, DIR_ENTRY_TYPE_DIR = 2;
+var init_dist = __esm(() => {
+  init_auth_state();
+  init_preview_message_types();
+  init_vendor();
+  init_auth_state();
+  init_tokens();
+  init_iframe_url();
+  init_utils();
+  init_file_system();
+  init_utils();
+  cachedBootOptions = {};
+  decoder = new TextDecoder;
+  encoder = new TextEncoder;
+});
+
+// src/core/boot.ts
+var exports_boot = {};
+__export(exports_boot, {
+  teardownWebContainer: () => teardownWebContainer,
+  getWebContainer: () => getWebContainer,
+  bootWebContainer: () => bootWebContainer,
+  WebContainerTabBlockedError: () => WebContainerTabBlockedError,
+  WebContainerBootTimeoutError: () => WebContainerBootTimeoutError
+});
+function isCoordinationMessage(data) {
+  return typeof data === "object" && data !== null && "type" in data && data.type !== undefined && ["ping", "pong", "takeover"].includes(String(data.type));
+}
+function createCoordinationMessage(type, token) {
+  return token ? { type, token } : type;
+}
+function bootWithCredentiallessIframe() {
+  const originalCreateElement = document.createElement.bind(document);
+  document.createElement = (tagName, options) => {
+    const element = options === undefined ? originalCreateElement(tagName) : originalCreateElement(tagName, options);
+    if (tagName.toLowerCase() === "iframe") {
+      const iframe = element;
+      iframe.setAttribute("credentialless", "");
+      if ("credentialless" in iframe) {
+        iframe.credentialless = true;
+      }
+    }
+    return element;
+  };
+  try {
+    return WebContainer.boot({
+      coep: "credentialless",
+      forwardPreviewErrors: "exceptions-only"
+    });
+  } finally {
+    document.createElement = originalCreateElement;
+  }
+}
+async function bootWebContainer(options) {
+  if (typeof window === "undefined") {
+    throw new Error("WebContainer can only be initialized in the browser.");
+  }
+  if (!window.crossOriginIsolated) {
+    throw new Error("WebContainer requires cross-origin isolation.");
+  }
+  if (bootPromise2)
+    return bootPromise2;
+  const channelName = options?.channelName ?? DEFAULT_CHANNEL_NAME;
+  const channelToken = options?.channelToken;
+  bootPromise2 = new Promise(async (resolve, reject) => {
+    let settled = false;
+    const fail = (error) => {
+      if (settled)
+        return;
+      settled = true;
+      bootPromise2 = null;
+      if (channel) {
+        channel.close();
+        channel = null;
+      }
+      if (heartbeatInterval !== null) {
+        window.clearInterval(heartbeatInterval);
+        heartbeatInterval = null;
+      }
+      reject(error);
+    };
+    try {
+      if (!channel) {
+        channel = new BroadcastChannel(channelName);
+        let otherTabActive = false;
+        channel.onmessage = (e) => {
+          let message = null;
+          if (isCoordinationMessage(e.data)) {
+            message = e.data;
+          } else if (typeof e.data === "string" && ["ping", "pong", "takeover"].includes(e.data)) {
+            message = { type: e.data };
+          }
+          if (!message)
+            return;
+          if (channelToken && message.token !== channelToken)
+            return;
+          if (message.type === "ping") {
+            channel?.postMessage(createCoordinationMessage("pong", channelToken));
+          } else if (message.type === "pong") {
+            otherTabActive = true;
+          } else if (message.type === "takeover") {
+            teardownWebContainer();
+          }
+        };
+        if (options?.takeover) {
+          channel.postMessage(createCoordinationMessage("takeover", channelToken));
+          await new Promise((r) => window.setTimeout(r, 250));
+        } else {
+          channel.postMessage(createCoordinationMessage("ping", channelToken));
+          await new Promise((r) => window.setTimeout(r, 5000));
+          if (otherTabActive) {
+            throw new WebContainerTabBlockedError;
+          }
+        }
+        heartbeatInterval = window.setInterval(() => {
+          channel?.postMessage(createCoordinationMessage("ping", channelToken));
+        }, 2000);
+      }
+      const timeoutPromise = new Promise((_, rejectTimeout) => {
+        window.setTimeout(() => {
+          rejectTimeout(new WebContainerBootTimeoutError);
+        }, BOOT_TIMEOUT_MS);
+      });
+      const booted = await Promise.race([
+        bootWithCredentiallessIframe(),
+        timeoutPromise
+      ]);
+      if (settled) {
+        booted.teardown();
+        return;
+      }
+      settled = true;
+      instance = booted;
+      resolve(instance);
+    } catch (e) {
+      fail(e);
+    }
+  });
+  return bootPromise2;
+}
+function teardownWebContainer() {
+  if (instance) {
+    instance.teardown();
+    instance = null;
+  }
+  bootPromise2 = null;
+  if (channel) {
+    channel.close();
+    channel = null;
+  }
+  if (heartbeatInterval !== null) {
+    window.clearInterval(heartbeatInterval);
+    heartbeatInterval = null;
+  }
+}
+function getWebContainer() {
+  return instance;
+}
+var instance = null, bootPromise2 = null, channel = null, heartbeatInterval = null, BOOT_TIMEOUT_MS = 45000, DEFAULT_CHANNEL_NAME, WebContainerTabBlockedError, WebContainerBootTimeoutError;
+var init_boot = __esm(() => {
+  init_dist();
+  DEFAULT_CHANNEL_NAME = typeof window !== "undefined" ? `vibe-ide-instance:${window.location.pathname}` : "vibe-ide-instance";
+  WebContainerTabBlockedError = class WebContainerTabBlockedError extends Error {
+    constructor() {
+      super("Web IDE is already active in another tab. Close it or take over the session.");
+      this.name = "WebContainerTabBlockedError";
+    }
+  };
+  WebContainerBootTimeoutError = class WebContainerBootTimeoutError extends Error {
+    constructor() {
+      super("WebContainer boot timed out. This is often caused by blocked third-party storage/cookies or aggressive browser privacy settings for StackBlitz/WebContainer domains.");
+      this.name = "WebContainerBootTimeoutError";
+    }
+  };
+});
+
+// src/core/bridge-shim.ts
+var BRIDGE_DEV_SHIM_SOURCE = `
+(async function() {
+  function waitForBridgeInit() {
+    return new Promise((resolve) => {
+      window.addEventListener('message', (e) => {
+        if (e.data?.type === 'vibe:init') {
+          resolve({ port: e.ports[0], previewSessionId: e.data.previewSessionId, bootstrap: e.data.bootstrap });
+        }
+      });
+    });
+  }
+
+  const { port, previewSessionId, bootstrap } = await waitForBridgeInit();
+  const effectivePermissions = new Set(Array.isArray(bootstrap?.effectivePermissions) ? bootstrap.effectivePermissions : []);
+  let currentBootstrap = bootstrap || {};
+
+  function sendOneWay(capability, method, args) {
+    port.postMessage({ id: crypto.randomUUID(), previewSessionId, capability, method, args });
+  }
+
+  function sendRequest(capability, method, args) {
+    const id = crypto.randomUUID();
+    return new Promise((resolve, reject) => {
+      const handler = (e) => {
+        if (e.data.id === id) {
+          port.removeEventListener('message', handler);
+          if (e.data.error) reject(new Error(e.data.error));
+          else resolve(e.data.result);
+        }
+      };
+      port.addEventListener('message', handler);
+      port.start();
+      port.postMessage({ id, previewSessionId, capability, method, args });
+    });
+  }
+
+  function sendStream(capability, method, args, onChunk) {
+    const id = crypto.randomUUID();
+    let isDone = false;
+    let stopEventRegistration = () => {};
+
+    const promise = new Promise((resolve, reject) => {
+      const handler = (e) => {
+        if (e.data.id === id) {
+          if (e.data.error) {
+            port.removeEventListener('message', handler);
+            reject(new Error(e.data.error));
+          } else if (e.data.chunk !== undefined) {
+             onChunk(e.data.chunk);
+          } else if (e.data.subscribed) {
+            resolve({ subscriptionId: id, unsubscribe: stopEventRegistration });
+          } else if (e.data.done || e.data.result !== undefined) {
+            port.removeEventListener('message', handler);
+            isDone = true;
+            resolve(e.data.result);
+          }
+        }
+      };
+      port.addEventListener('message', handler);
+      port.start();
+      port.postMessage({ id, previewSessionId, capability, method, args });
+       
+      stopEventRegistration = () => {
+         if (!isDone) {
+           port.removeEventListener('message', handler);
+           port.postMessage({
+             id: crypto.randomUUID(),
+             previewSessionId,
+             capability,
+             method: 'unsubscribe',
+             args: [id],
+           });
+         }
+       };
+    });
+    
+    return { promise, unsubscribe: stopEventRegistration };
+  }
+
+  /* ── Capability factories ─────────────────────────────────────────────
+   * Each factory returns the namespace object for a single capability.
+   * Only capabilities present in effectivePermissions are assigned to the
+   * bridge object, so unpermitted ones remain undefined and optional
+   * chaining (e.g. bridge.auth?.getUser()) short-circuits safely.
+   * ──────────────────────────────────────────────────────────────────── */
+
+  const capabilityFactories = {
+    auth: () => ({
+      getUser: () => {
+        if (!currentBootstrap.user) {
+          throw new Error('auth.getUser() is unavailable in this preview');
+        }
+        return currentBootstrap.user;
+      },
+      getToken: async () => { throw new Error("auth.getToken() is unavailable in dev preview"); }
+    }),
+    theme: () => ({
+      current: () => currentBootstrap.theme
+    }),
+    toast: () => ({
+      show: (msg, opts) => sendOneWay('toast', 'show', [msg, opts])
+    }),
+    api: () => ({
+      fetch: async (ep, opts) => {
+        const res = await sendRequest('api', 'fetch', [ep, opts]);
+        return new Response(res.body, { status: res.status, statusText: res.statusText, headers: res.headers });
+      }
+    }),
+    storage: () => ({
+      get: (key) => sendRequest('storage', 'get', [key]),
+      set: (key, val) => sendRequest('storage', 'set', [key, val]),
+      remove: (key) => sendRequest('storage', 'remove', [key]),
+      keys: () => sendRequest('storage', 'keys', [])
+    }),
+    navigation: () => ({
+      navigate: (path) => sendOneWay('navigation', 'navigate', [path])
+    }),
+    events: () => ({
+      emit: (evt, data) => sendOneWay('events', 'emit', [evt, data]),
+      on: (evt, cb) => {
+         const stream = sendStream('events', 'on', [evt], (chunk) => {
+            cb(chunk);
+         });
+         return stream.unsubscribe;
+      },
+      once: (evt, cb) => {
+         let unsub = () => {};
+         const wrappedCb = (chunk) => { unsub(); cb(chunk); };
+         const stream = sendStream('events', 'once', [evt], wrappedCb);
+         unsub = stream.unsubscribe;
+         return unsub;
+      }
+    }),
+    chat: () => ({
+      send: function(serverUrl, parts, options) {
+          const payload = {
+            serverUrl,
+            parts,
+            options: options ? {
+              contextId: options.contextId,
+              messageId: options.messageId,
+              metadata: options.metadata,
+            } : undefined,
+          };
+         let buffer = [];
+          let error = null;
+          let done = false;
+          let resolvers = [];
+         const stream = sendStream('chat', 'send', [payload], (chunk) => {
+            buffer.push(chunk);
+            if (resolvers.length > 0) resolvers.shift()();
+         });
+
+         stream.promise.then((res) => {
+             done = true;
+             if (resolvers.length > 0) resolvers.shift()();
+          }).catch(err => {
+             error = err;
+             done = true;
+             if (resolvers.length > 0) resolvers.shift()();
+          });
+         const iterator = (async function*() {
+           while (true) {
+             if (buffer.length > 0) yield buffer.shift();
+             else if (error) throw error;
+             else if (done) break;
+             else await new Promise(r => resolvers.push(r));
+           }
+         })();
+
+         return {
+           [Symbol.asyncIterator]: () => iterator,
+           abort: () => stream.unsubscribe(),
+         };
+       }
+    })
+  };
+
+  /* ── Build bridge object from permitted capabilities only ──────────── */
+
+  function buildBridge() {
+    const bridge = {};
+    for (const cap of effectivePermissions) {
+      if (capabilityFactories[cap]) {
+        bridge[cap] = capabilityFactories[cap]();
+      }
+    }
+    return bridge;
+  }
+
+  window.__VIBE_BRIDGE_DEV__ = buildBridge();
+
+  /* ── Handle runtime permission changes ─────────────────────────────── */
+
+  window.addEventListener('message', (e) => {
+    if (e.data?.type === 'vibe:permissions') {
+      effectivePermissions.clear();
+      const nextPermissions = Array.isArray(e.data.effectivePermissions) ? e.data.effectivePermissions : [];
+      nextPermissions.forEach((capability) => effectivePermissions.add(capability));
+      currentBootstrap = e.data.bootstrap || currentBootstrap;
+      window.__VIBE_BRIDGE_DEV__ = buildBridge();
+    }
+  });
+
+  window.dispatchEvent(new Event("vibe-bridge-ready"));
+})();
+`;
+
+// src/core/inject-shim.ts
+var exports_inject_shim = {};
+__export(exports_inject_shim, {
+  injectDevShim: () => injectDevShim
+});
+async function injectDevShim(instance2) {
+  try {
+    await instance2.fs.mkdir(".ide");
+  } catch {}
+  await instance2.fs.writeFile(".ide/vibe-bridge-dev.js", BRIDGE_DEV_SHIM_SOURCE);
+}
+var init_inject_shim = () => {};
+
+// src/core/process.ts
+var exports_process = {};
+__export(exports_process, {
+  spawnWithOutput: () => spawnWithOutput,
+  spawnDevServer: () => spawnDevServer,
+  DevServerStartupError: () => DevServerStartupError
+});
+async function spawnWithOutput(instance2, command, args, options) {
+  const process = await instance2.spawn(command, args);
+  let buffer = "";
+  let batched = false;
+  let totalOutput = 0;
+  const MAX_TOTAL = 1 * 1024 * 1024;
+  const MAX_FLUSH = 50 * 1024;
+  let isKilled = false;
+  const stream = new WritableStream({
+    write(data) {
+      if (isKilled)
+        return;
+      totalOutput += data.length;
+      if (totalOutput > MAX_TOTAL) {
+        console.error(`Process ${command} output exceeded 1MB cap.`);
+        isKilled = true;
+        process.kill();
+        return;
+      }
+      buffer += data;
+      if (buffer.length > MAX_FLUSH && options?.onChunk) {
+        options.onChunk(buffer);
+        buffer = "";
+        return;
+      }
+      if (options?.onChunk && !batched && buffer.length > 0) {
+        batched = true;
+        requestAnimationFrame(() => {
+          if (buffer.length > 0 && !isKilled) {
+            options.onChunk(buffer);
+            buffer = "";
+          }
+          batched = false;
+        });
+      }
+    }
+  });
+  process.output.pipeTo(stream).catch(() => {});
+  const exitCodePromise = new Promise((resolve) => {
+    const timeoutMs = options?.timeout ?? 120000;
+    let timeoutId;
+    if (timeoutMs > 0) {
+      timeoutId = window.setTimeout(() => {
+        isKilled = true;
+        process.kill();
+      }, timeoutMs);
+    }
+    process.exit.then((code) => {
+      if (timeoutId)
+        window.clearTimeout(timeoutId);
+      if (buffer && options?.onChunk && !isKilled) {
+        options.onChunk(buffer);
+        buffer = "";
+      }
+      resolve(isKilled ? 143 : code);
+    });
+  });
+  return {
+    exitCode: exitCodePromise,
+    kill: () => {
+      isKilled = true;
+      process.kill();
+    }
+  };
+}
+async function spawnDevServer(instance2, options) {
+  const process = await instance2.spawn("npm", ["run", "dev"]);
+  let output = "";
+  let resolved = false;
+  let timeoutId = null;
+  const serverReadyPromise = new Promise((resolve, reject) => {
+    const unsubscribe = instance2.on("server-ready", (_port, url) => {
+      resolved = true;
+      if (timeoutId !== null) {
+        window.clearTimeout(timeoutId);
+      }
+      unsubscribe();
+      resolve(url);
+    });
+    const timeoutMs = options?.timeout ?? 120000;
+    if (timeoutMs > 0) {
+      timeoutId = window.setTimeout(() => {
+        if (resolved) {
+          return;
+        }
+        process.kill();
+        unsubscribe();
+        reject(new DevServerStartupError("Timed out waiting for the dev server to become ready.", output));
+      }, timeoutMs);
+    }
+    process.exit.then((code) => {
+      if (resolved) {
+        return;
+      }
+      if (timeoutId !== null) {
+        window.clearTimeout(timeoutId);
+      }
+      unsubscribe();
+      reject(new DevServerStartupError(`Dev server exited before becoming ready (exit code ${code}).`, output));
+    });
+  });
+  process.output.pipeTo(new WritableStream({
+    write(data) {
+      output += data;
+      if (output.length > 64 * 1024) {
+        output = output.slice(output.length - 64 * 1024);
+      }
+      options?.onOutput?.(data);
+    }
+  })).catch(() => {});
+  return {
+    url: serverReadyPromise,
+    kill: () => process.kill(),
+    output: process.output
+  };
+}
+var DevServerStartupError;
+var init_process = __esm(() => {
+  DevServerStartupError = class DevServerStartupError extends Error {
+    output;
+    constructor(message, output) {
+      super(message);
+      this.name = "DevServerStartupError";
+      this.output = output;
+    }
+  };
+});
+
+// src/core/install.ts
+var exports_install = {};
+__export(exports_install, {
+  installDependencies: () => installDependencies,
+  computeInstallFingerprint: () => computeInstallFingerprint
+});
+async function computeInstallFingerprint(lockfile, nodeVersion, npmVersion, installMode, templateId) {
+  const input = `${lockfile}:${nodeVersion}:${npmVersion}:${installMode}:${templateId}`;
+  const enc = new TextEncoder().encode(input);
+  const hash = await crypto.subtle.digest("SHA-256", enc);
+  return Array.from(new Uint8Array(hash)).map((b) => b.toString(16).padStart(2, "0")).join("");
+}
+async function installDependencies(instance2, options) {
+  let hasLockfile = false;
+  let pkgLock = "";
+  try {
+    pkgLock = await instance2.fs.readFile("/package-lock.json", "utf8");
+    hasLockfile = !!pkgLock;
+  } catch {
+    hasLockfile = false;
+  }
+  const currentFingerprint = await computeInstallFingerprint(pkgLock, "20.x", "10.x", hasLockfile ? "ci" : "install", options?.templateId || "react");
+  if (successfulFingerprints.get(instance2) === currentFingerprint) {
+    return { skipped: true, exitCode: 0, fingerprint: currentFingerprint };
+  }
+  const args = hasLockfile ? ["ci", "--prefer-offline"] : ["install", "--prefer-offline"];
+  const proc = await spawnWithOutput(instance2, "npm", args, {
+    onChunk: options?.onOutput
+  });
+  const code = await proc.exitCode;
+  if (code === 0) {
+    successfulFingerprints.set(instance2, currentFingerprint);
+  }
+  return { skipped: false, exitCode: code, fingerprint: currentFingerprint };
+}
+var successfulFingerprints;
+var init_install = __esm(() => {
+  init_process();
+  successfulFingerprints = new WeakMap;
+});
+
+// src/react/provider.tsx
+import {
+  createContext,
+  useCallback as useCallback2,
+  useEffect as useEffect2,
+  useMemo,
+  useRef as useRef2,
+  useState as useState2
+} from "react";
+import { jsxDEV } from "react/jsx-dev-runtime";
+function appendBootLog(current, chunk) {
+  const next = current + chunk;
+  return next.length <= MAX_BOOT_LOG_LENGTH ? next : next.slice(next.length - MAX_BOOT_LOG_LENGTH);
+}
+function formatBootError(message, output) {
+  const trimmedOutput = output.trim();
+  if (!trimmedOutput) {
+    return new Error(message);
+  }
+  const excerpt = trimmedOutput.slice(-4000);
+  return new Error(`${message}
+
+Recent output:
+${excerpt}`);
+}
+async function withTimeout(promise, timeoutMs, message, getOutput) {
+  let timeoutId = null;
+  const timeoutPromise = new Promise((_, reject) => {
+    timeoutId = window.setTimeout(() => {
+      reject(formatBootError(message, getOutput()));
+    }, timeoutMs);
+  });
+  try {
+    return await Promise.race([promise, timeoutPromise]);
+  } finally {
+    if (timeoutId !== null) {
+      window.clearTimeout(timeoutId);
+    }
+  }
+}
+function buildDefaultPolicy(override) {
+  return {
+    autoApproved: override?.autoApproved ?? DEFAULT_AUTO_APPROVED,
+    requestApproval: override?.requestApproval,
+    allowNavigation: override?.allowNavigation,
+    allowApiRequest: override?.allowApiRequest,
+    allowChatRequest: override?.allowChatRequest
+  };
+}
+function VibeIdeProvider({
+  draftId,
+  templateId,
+  bridge,
+  chat,
+  previewPolicy: previewPolicyProp,
+  persistence,
+  approval,
+  templateVars,
+  initialTree,
+  bootOptions,
+  children
+}) {
+  const [status, setStatus] = useState2("idle");
+  const [error, setError] = useState2(null);
+  const [devServerUrl, setDevServerUrl] = useState2(null);
+  const [bootNonce, setBootNonce] = useState2(0);
+  const [manifestPermissions, setManifestPermissions] = useState2([]);
+  const [activeRightPane, setActiveRightPane] = useState2("preview");
+  const [refreshNonce, setRefreshNonce] = useState2(0);
+  const [previewSessionNonce, setPreviewSessionNonce] = useState2(0);
+  const instanceRef = useRef2(null);
+  const coalescerRef = useRef2(null);
+  const processRegistryRef = useRef2(null);
+  const serverRef = useRef2(null);
+  const defaultBootOptionsRef = useRef2(bootOptions ?? {});
+  const bootOptionsRef = useRef2(bootOptions ?? {});
+  const previewChannelRef = useRef2(null);
+  const bridgeRef = useRef2(bridge);
+  const flushTimerRef = useRef2(null);
+  useEffect2(() => {
+    bridgeRef.current = bridge;
+  }, [bridge]);
+  useEffect2(() => {
+    defaultBootOptionsRef.current = bootOptions ?? {};
+  }, [bootOptions]);
+  useEffect2(() => {
+    if (!draftId)
+      return;
+    let mounted = true;
+    async function boot() {
+      setStatus("booting");
+      setError(null);
+      setDevServerUrl(null);
+      let bootOutput = "";
+      let bootStage = "booting WebContainer";
+      let unsubscribeFromWebContainerError = null;
+      const captureBootOutput = (chunk) => {
+        bootOutput = appendBootLog(bootOutput, chunk);
+      };
+      try {
+        const { bootWebContainer: bootWebContainer2 } = await Promise.resolve().then(() => (init_boot(), exports_boot));
+        const { injectDevShim: injectDevShim2 } = await Promise.resolve().then(() => (init_inject_shim(), exports_inject_shim));
+        const { installDependencies: installDependencies2 } = await Promise.resolve().then(() => (init_install(), exports_install));
+        const { spawnDevServer: spawnDevServer2 } = await Promise.resolve().then(() => (init_process(), exports_process));
+        const wb = await withTimeout(bootWebContainer2(bootOptionsRef.current), BOOT_SEQUENCE_TIMEOUT_MS, `Timed out while ${bootStage}.`, () => bootOutput);
+        bootOptionsRef.current = { ...defaultBootOptionsRef.current };
+        if (!mounted)
+          return;
+        unsubscribeFromWebContainerError = wb.on("error", (event) => {
+          captureBootOutput(`[webcontainer] ${event.message}
+`);
+        });
+        bootStage = "mounting the project template";
+        const tree = initialTree ?? getVibeIdeTemplateTree(templateId, templateVars);
+        await withTimeout(wb.mount(tree), BOOT_SEQUENCE_TIMEOUT_MS, `Timed out while ${bootStage}.`, () => bootOutput);
+        instanceRef.current = wb;
+        processRegistryRef.current = new ProcessRegistry(wb);
+        coalescerRef.current = new WriteCoalescer(wb, {
+          onFlush: () => {
+            if (flushTimerRef.current !== null) {
+              window.clearTimeout(flushTimerRef.current);
+            }
+            flushTimerRef.current = window.setTimeout(() => {
+              flushTimerRef.current = null;
+              setRefreshNonce((n) => n + 1);
+            }, 500);
+          }
+        });
+        bootStage = "injecting the preview bridge";
+        await injectDevShim2(wb);
+        bootStage = "installing dependencies";
+        const installResult = await installDependencies2(wb, {
+          templateId,
+          onOutput: captureBootOutput
+        });
+        if (installResult.exitCode !== 0) {
+          throw formatBootError(`Dependency installation failed with exit code ${installResult.exitCode}.`, bootOutput);
+        }
+        bootStage = "starting the dev server";
+        const server = await spawnDevServer2(wb, { onOutput: captureBootOutput });
+        serverRef.current = server;
+        const url = await withTimeout(server.url, BOOT_SEQUENCE_TIMEOUT_MS, `Timed out while ${bootStage}.`, () => bootOutput);
+        unsubscribeFromWebContainerError?.();
+        unsubscribeFromWebContainerError = null;
+        if (!mounted) {
+          server.kill();
+          return;
+        }
+        setDevServerUrl(url);
+        setPreviewSessionNonce((n) => n + 1);
+        setStatus("ready");
+      } catch (e) {
+        if (!mounted)
+          return;
+        const err = e instanceof Error ? bootOutput && !e.message.includes("Recent output:") ? formatBootError(e.message, bootOutput) : e : formatBootError(String(e), bootOutput);
+        unsubscribeFromWebContainerError?.();
+        if (err.name === "WebContainerTabBlockedError") {
+          setStatus("blocked");
+        } else {
+          setStatus("error");
+        }
+        setError(err);
+      }
+    }
+    boot();
+    return () => {
+      mounted = false;
+      serverRef.current?.kill();
+      serverRef.current = null;
+      processRegistryRef.current?.destroy();
+      processRegistryRef.current = null;
+      Promise.resolve().then(() => (init_boot(), exports_boot)).then((m) => m.teardownWebContainer());
+      coalescerRef.current?.destroy();
+      if (flushTimerRef.current !== null) {
+        window.clearTimeout(flushTimerRef.current);
+        flushTimerRef.current = null;
+      }
+    };
+  }, [draftId, bootNonce, templateId, templateVars, initialTree]);
+  useEffect2(() => {
+    const instance2 = instanceRef.current;
+    if (!instance2) {
+      setManifestPermissions([]);
+      return;
+    }
+    let cancelled = false;
+    (async () => {
+      try {
+        const raw = await instance2.fs.readFile("/manifest.json", "utf8");
+        if (!raw || cancelled)
+          return;
+        const parsed = JSON.parse(raw);
+        setManifestPermissions(Array.isArray(parsed.permissions) ? parsed.permissions : []);
+      } catch {
+        if (!cancelled)
+          setManifestPermissions([]);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [devServerUrl]);
+  const restart = useCallback2(async (options) => {
+    const { teardownWebContainer: teardownWebContainer2 } = await Promise.resolve().then(() => (init_boot(), exports_boot));
+    serverRef.current?.kill();
+    serverRef.current = null;
+    processRegistryRef.current?.destroy();
+    processRegistryRef.current = null;
+    teardownWebContainer2();
+    bootOptionsRef.current = {
+      ...defaultBootOptionsRef.current,
+      ...options ?? {}
+    };
+    setStatus("booting");
+    setError(null);
+    setDevServerUrl(null);
+    setPreviewSessionNonce((n) => n + 1);
+    instanceRef.current = null;
+    setBootNonce((n) => n + 1);
+  }, []);
+  const refresh = useCallback2(() => {
+    setRefreshNonce((n) => n + 1);
+  }, []);
+  const autosave = useAutosave({
+    draftId,
+    instance: instanceRef.current,
+    coalescer: coalescerRef.current,
+    enabled: status === "ready",
+    persistence
+  });
+  const previewPolicy = useMemo(() => buildDefaultPolicy(previewPolicyProp), [previewPolicyProp]);
+  const contextValue = useMemo(() => ({
+    draftId,
+    templateId,
+    bridge,
+    chat: chat ?? null,
+    previewPolicy,
+    approval: approval ?? {},
+    webcontainer: {
+      status,
+      instance: instanceRef.current,
+      devServerUrl,
+      error,
+      restart,
+      refresh,
+      refreshNonce,
+      previewSessionNonce,
+      coalescer: coalescerRef.current
+    },
+    processRegistry: processRegistryRef.current,
+    autosave,
+    manifestPermissions,
+    activeRightPane,
+    setActiveRightPane,
+    previewChannelRef,
+    bridgeRef
+  }), [
+    draftId,
+    templateId,
+    bridge,
+    chat,
+    previewPolicy,
+    approval,
+    status,
+    devServerUrl,
+    error,
+    restart,
+    refresh,
+    refreshNonce,
+    previewSessionNonce,
+    autosave,
+    manifestPermissions,
+    activeRightPane
+  ]);
+  return /* @__PURE__ */ jsxDEV(VibeIdeContext.Provider, {
+    value: contextValue,
+    children
+  }, undefined, false, undefined, this);
+}
+var VibeIdeContext, MAX_BOOT_LOG_LENGTH, BOOT_SEQUENCE_TIMEOUT_MS = 180000, DEFAULT_AUTO_APPROVED;
+var init_provider = __esm(() => {
+  init_filesystem();
+  init_generated();
+  init_use_autosave();
+  VibeIdeContext = createContext(null);
+  MAX_BOOT_LOG_LENGTH = 64 * 1024;
+  DEFAULT_AUTO_APPROVED = [
+    "toast",
+    "theme"
+  ];
+});
+
+// src/react/use-vibe-ide.ts
+import { useContext } from "react";
+function useVibeIde() {
+  const ctx = useContext(VibeIdeContext);
+  if (!ctx) {
+    throw new Error("useVibeIde must be used within a <VibeIdeProvider>.");
+  }
+  return ctx;
+}
+var init_use_vibe_ide = __esm(() => {
+  init_provider();
+});
+
+// src/react/file-explorer.tsx
+var exports_file_explorer = {};
+__export(exports_file_explorer, {
+  FileExplorer: () => FileExplorer
+});
+import { useCallback as useCallback3, useEffect as useEffect3, useRef as useRef3, useState as useState3 } from "react";
+import { jsxDEV as jsxDEV2, Fragment } from "react/jsx-dev-runtime";
+function getFileIcon(name) {
+  const ext = name.split(".").pop()?.toLowerCase() ?? "";
+  return EXTENSION_ICONS[ext] ?? "F";
+}
+function TreeNode({
+  entry,
+  depth,
+  expandedDirs,
+  selectedFile,
+  onToggleDir,
+  onSelectFile,
+  onContextMenu
+}) {
+  const isDir = entry.type === "directory";
+  const isExpanded = expandedDirs.has(entry.path);
+  const isSelected = selectedFile === entry.path;
+  return /* @__PURE__ */ jsxDEV2(Fragment, {
+    children: [
+      /* @__PURE__ */ jsxDEV2("button", {
+        className: "flex w-full items-center gap-1.5 py-0.5 text-left text-xs",
+        style: {
+          paddingLeft: `${depth * 12 + 8}px`,
+          background: isSelected ? "var(--ide-accent-soft)" : "transparent",
+          color: isSelected ? "var(--ide-accent)" : "var(--ide-text-secondary)",
+          borderRadius: "2px"
+        },
+        onClick: () => {
+          if (isDir) {
+            onToggleDir(entry.path);
+          } else {
+            onSelectFile(entry.path);
+          }
+        },
+        onContextMenu: (e) => onContextMenu(e, entry),
+        title: entry.path,
+        children: [
+          /* @__PURE__ */ jsxDEV2("span", {
+            className: "inline-flex w-3 shrink-0 justify-center",
+            style: { opacity: isDir ? 1 : 0 },
+            children: /* @__PURE__ */ jsxDEV2("svg", {
+              width: "8",
+              height: "8",
+              viewBox: "0 0 8 8",
+              fill: "currentColor",
+              style: {
+                transform: isExpanded ? "rotate(90deg)" : "rotate(0deg)",
+                transition: "transform 100ms"
+              },
+              children: /* @__PURE__ */ jsxDEV2("path", {
+                d: "M2 1 L6 4 L2 7 Z"
+              }, undefined, false, undefined, this)
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV2("span", {
+            className: "inline-flex w-5 shrink-0 justify-center text-[9px] font-bold",
+            style: {
+              color: isDir ? "var(--ide-accent-muted)" : "var(--ide-text-tertiary)"
+            },
+            children: isDir ? isExpanded ? "▾" : "▸" : getFileIcon(entry.name)
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV2("span", {
+            className: "truncate",
+            children: entry.name
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      isDir && isExpanded && entry.children && /* @__PURE__ */ jsxDEV2(Fragment, {
+        children: [
+          entry.children.map((child) => /* @__PURE__ */ jsxDEV2(TreeNode, {
+            entry: child,
+            depth: depth + 1,
+            expandedDirs,
+            selectedFile,
+            onToggleDir,
+            onSelectFile,
+            onContextMenu
+          }, child.path, false, undefined, this)),
+          entry.children.length === 0 && /* @__PURE__ */ jsxDEV2("span", {
+            className: "block py-0.5 text-[10px] italic",
+            style: {
+              paddingLeft: `${(depth + 1) * 12 + 8}px`,
+              color: "var(--ide-text-tertiary)"
+            },
+            children: "(empty)"
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function InlineInput({ defaultValue = "", onSubmit, onCancel, placeholder }) {
+  const inputRef = useRef3(null);
+  const [value, setValue] = useState3(defaultValue);
+  useEffect3(() => {
+    inputRef.current?.focus();
+    inputRef.current?.select();
+  }, []);
+  return /* @__PURE__ */ jsxDEV2("input", {
+    ref: inputRef,
+    className: "ide-input w-full py-0.5 px-2 text-xs",
+    style: { margin: "2px 8px", fontSize: "11px" },
+    value,
+    placeholder,
+    onChange: (e) => setValue(e.target.value),
+    onKeyDown: (e) => {
+      if (e.key === "Enter" && value.trim()) {
+        onSubmit(value.trim());
+      } else if (e.key === "Escape") {
+        onCancel();
+      }
+    },
+    onBlur: () => {
+      if (value.trim()) {
+        onSubmit(value.trim());
+      } else {
+        onCancel();
+      }
+    }
+  }, undefined, false, undefined, this);
+}
+function FileExplorer({
+  onFileSelect,
+  selectedFile: selectedFileProp = null,
+  refreshNonce = 0
+}) {
+  const { webcontainer } = useVibeIde();
+  const instance2 = webcontainer.instance;
+  const [tree, setTree] = useState3([]);
+  const [expandedDirs, setExpandedDirs] = useState3(() => new Set(["/src"]));
+  const [internalSelectedFile, setInternalSelectedFile] = useState3(null);
+  const [loading, setLoading] = useState3(true);
+  const [contextMenu, setContextMenu] = useState3(null);
+  const [inlineAction, setInlineAction] = useState3(null);
+  const selectedFile = selectedFileProp ?? internalSelectedFile;
+  const loadTree = useCallback3(async () => {
+    if (!instance2)
+      return;
+    try {
+      const entries = await readTreeStructure(instance2);
+      setTree(entries);
+    } catch (e) {
+      console.error("FileExplorer: failed to read tree", e);
+    } finally {
+      setLoading(false);
+    }
+  }, [instance2]);
+  useEffect3(() => {
+    loadTree();
+  }, [loadTree, refreshNonce]);
+  useEffect3(() => {
+    const coalescer = webcontainer.coalescer;
+    if (!coalescer)
+      return;
+    let pending = false;
+    let timerId = null;
+    const triggerRefresh = () => {
+      if (pending)
+        return;
+      pending = true;
+      timerId = window.setTimeout(() => {
+        pending = false;
+        loadTree();
+      }, 500);
+    };
+    const unsubWrite = coalescer.onWrite(triggerRefresh);
+    const unsubDelete = coalescer.onDelete(triggerRefresh);
+    return () => {
+      unsubWrite();
+      unsubDelete();
+      if (timerId !== null)
+        window.clearTimeout(timerId);
+    };
+  }, [webcontainer.coalescer, loadTree]);
+  const handleToggleDir = useCallback3((path) => {
+    setExpandedDirs((prev) => {
+      const next = new Set(prev);
+      if (next.has(path)) {
+        next.delete(path);
+      } else {
+        next.add(path);
+      }
+      return next;
+    });
+  }, []);
+  const handleSelectFile = useCallback3((path) => {
+    setInternalSelectedFile(path);
+    onFileSelect?.(path);
+  }, [onFileSelect]);
+  const handleContextMenu = useCallback3((e, entry) => {
+    e.preventDefault();
+    setContextMenu({
+      x: e.clientX,
+      y: e.clientY,
+      entry,
+      parentPath: entry.type === "directory" ? entry.path : entry.path.split("/").slice(0, -1).join("/") || "/"
+    });
+  }, []);
+  useEffect3(() => {
+    if (!contextMenu)
+      return;
+    const handler = () => setContextMenu(null);
+    window.addEventListener("click", handler);
+    return () => window.removeEventListener("click", handler);
+  }, [contextMenu]);
+  const handleCreateFile = useCallback3((parentPath) => {
+    setContextMenu(null);
+    setExpandedDirs((prev) => new Set(prev).add(parentPath));
+    setInlineAction({ type: "create-file", parentPath });
+  }, []);
+  const handleCreateDir = useCallback3((parentPath) => {
+    setContextMenu(null);
+    setExpandedDirs((prev) => new Set(prev).add(parentPath));
+    setInlineAction({ type: "create-dir", parentPath });
+  }, []);
+  const handleRename = useCallback3((entry) => {
+    setContextMenu(null);
+    const parentPath = entry.path.split("/").slice(0, -1).join("/") || "/";
+    setInlineAction({
+      type: "rename",
+      parentPath,
+      currentName: entry.name,
+      currentPath: entry.path
+    });
+  }, []);
+  const handleDelete = useCallback3(async (entry) => {
+    setContextMenu(null);
+    if (!instance2)
+      return;
+    const confirmed = window.confirm(`Delete "${entry.name}"?`);
+    if (!confirmed)
+      return;
+    try {
+      await instance2.fs.rm(entry.path, { recursive: true });
+      webcontainer.coalescer?.notifyDelete?.(entry.path);
+      loadTree();
+    } catch (e) {
+      console.error("FileExplorer: delete failed", e);
+    }
+  }, [instance2, webcontainer.coalescer, loadTree]);
+  const handleInlineSubmit = useCallback3(async (value) => {
+    if (!instance2 || !inlineAction)
+      return;
+    try {
+      if (inlineAction.type === "create-file") {
+        const fullPath = inlineAction.parentPath === "/" ? `/${value}` : `${inlineAction.parentPath}/${value}`;
+        sanitizePath(value);
+        await instance2.fs.writeFile(fullPath, "");
+        loadTree();
+        handleSelectFile(fullPath);
+      } else if (inlineAction.type === "create-dir") {
+        const fullPath = inlineAction.parentPath === "/" ? `/${value}` : `${inlineAction.parentPath}/${value}`;
+        sanitizePath(value);
+        await instance2.fs.mkdir(fullPath, { recursive: true });
+        loadTree();
+      } else if (inlineAction.type === "rename" && inlineAction.currentPath) {
+        const oldPath = inlineAction.currentPath;
+        const newPath = inlineAction.parentPath === "/" ? `/${value}` : `${inlineAction.parentPath}/${value}`;
+        sanitizePath(value);
+        const content = await instance2.fs.readFile(oldPath, "utf8");
+        await instance2.fs.writeFile(newPath, content);
+        await instance2.fs.rm(oldPath);
+        webcontainer.coalescer?.notifyDelete?.(oldPath);
+        loadTree();
+        if (selectedFile === oldPath) {
+          handleSelectFile(newPath);
+        }
+      }
+    } catch (e) {
+      console.error("FileExplorer: inline action failed", e);
+    } finally {
+      setInlineAction(null);
+    }
+  }, [instance2, inlineAction, webcontainer.coalescer, loadTree, handleSelectFile, selectedFile]);
+  if (loading && tree.length === 0) {
+    return /* @__PURE__ */ jsxDEV2("div", {
+      className: "flex h-full items-center justify-center",
+      style: { color: "var(--ide-text-tertiary)" },
+      children: /* @__PURE__ */ jsxDEV2("div", {
+        className: "ide-spinner",
+        style: { width: "1.25rem", height: "1.25rem" }
+      }, undefined, false, undefined, this)
+    }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV2("div", {
+    className: "flex h-full flex-col overflow-hidden",
+    style: { background: "var(--ide-bg)" },
+    children: [
+      /* @__PURE__ */ jsxDEV2("div", {
+        className: "flex h-8 shrink-0 items-center justify-between px-3",
+        style: {
+          borderBottom: "1px solid var(--ide-border)",
+          color: "var(--ide-text-tertiary)"
+        },
+        children: [
+          /* @__PURE__ */ jsxDEV2("span", {
+            className: "text-[10px] font-semibold uppercase tracking-wider",
+            children: "Explorer"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV2("div", {
+            className: "flex gap-1",
+            children: [
+              /* @__PURE__ */ jsxDEV2("button", {
+                className: "flex h-5 w-5 items-center justify-center rounded",
+                style: { color: "var(--ide-text-tertiary)" },
+                onClick: () => handleCreateFile("/"),
+                title: "New File",
+                children: /* @__PURE__ */ jsxDEV2("svg", {
+                  width: "12",
+                  height: "12",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  children: [
+                    /* @__PURE__ */ jsxDEV2("path", {
+                      d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"
+                    }, undefined, false, undefined, this),
+                    /* @__PURE__ */ jsxDEV2("polyline", {
+                      points: "14 2 14 8 20 8"
+                    }, undefined, false, undefined, this),
+                    /* @__PURE__ */ jsxDEV2("line", {
+                      x1: "12",
+                      y1: "18",
+                      x2: "12",
+                      y2: "12"
+                    }, undefined, false, undefined, this),
+                    /* @__PURE__ */ jsxDEV2("line", {
+                      x1: "9",
+                      y1: "15",
+                      x2: "15",
+                      y2: "15"
+                    }, undefined, false, undefined, this)
+                  ]
+                }, undefined, true, undefined, this)
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV2("button", {
+                className: "flex h-5 w-5 items-center justify-center rounded",
+                style: { color: "var(--ide-text-tertiary)" },
+                onClick: () => handleCreateDir("/"),
+                title: "New Folder",
+                children: /* @__PURE__ */ jsxDEV2("svg", {
+                  width: "12",
+                  height: "12",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  children: [
+                    /* @__PURE__ */ jsxDEV2("path", {
+                      d: "M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"
+                    }, undefined, false, undefined, this),
+                    /* @__PURE__ */ jsxDEV2("line", {
+                      x1: "12",
+                      y1: "11",
+                      x2: "12",
+                      y2: "17"
+                    }, undefined, false, undefined, this),
+                    /* @__PURE__ */ jsxDEV2("line", {
+                      x1: "9",
+                      y1: "14",
+                      x2: "15",
+                      y2: "14"
+                    }, undefined, false, undefined, this)
+                  ]
+                }, undefined, true, undefined, this)
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV2("button", {
+                className: "flex h-5 w-5 items-center justify-center rounded",
+                style: { color: "var(--ide-text-tertiary)" },
+                onClick: loadTree,
+                title: "Refresh",
+                children: /* @__PURE__ */ jsxDEV2("svg", {
+                  width: "10",
+                  height: "10",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2.5",
+                  children: [
+                    /* @__PURE__ */ jsxDEV2("path", {
+                      d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"
+                    }, undefined, false, undefined, this),
+                    /* @__PURE__ */ jsxDEV2("path", {
+                      d: "M3 3v5h5"
+                    }, undefined, false, undefined, this)
+                  ]
+                }, undefined, true, undefined, this)
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV2("div", {
+        className: "flex-1 overflow-y-auto ide-scrollbar py-1",
+        children: [
+          tree.map((entry) => /* @__PURE__ */ jsxDEV2(TreeNode, {
+            entry,
+            depth: 0,
+            expandedDirs,
+            selectedFile,
+            onToggleDir: handleToggleDir,
+            onSelectFile: handleSelectFile,
+            onContextMenu: handleContextMenu
+          }, entry.path, false, undefined, this)),
+          inlineAction && /* @__PURE__ */ jsxDEV2(InlineInput, {
+            defaultValue: inlineAction.currentName ?? "",
+            placeholder: inlineAction.type === "create-file" ? "filename.ts" : inlineAction.type === "create-dir" ? "folder-name" : "new name",
+            onSubmit: handleInlineSubmit,
+            onCancel: () => setInlineAction(null)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      contextMenu && /* @__PURE__ */ jsxDEV2("div", {
+        className: "fixed z-50 min-w-[140px] rounded-md py-1",
+        style: {
+          left: contextMenu.x,
+          top: contextMenu.y,
+          background: "var(--ide-surface)",
+          border: "1px solid var(--ide-border)",
+          boxShadow: "0 4px 12px rgba(0,0,0,0.4)"
+        },
+        children: [
+          /* @__PURE__ */ jsxDEV2("button", {
+            className: "flex w-full items-center gap-2 px-3 py-1.5 text-xs hover:bg-[var(--ide-surface-hover)]",
+            style: { color: "var(--ide-text-secondary)" },
+            onClick: () => handleCreateFile(contextMenu.parentPath),
+            children: "New File"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV2("button", {
+            className: "flex w-full items-center gap-2 px-3 py-1.5 text-xs hover:bg-[var(--ide-surface-hover)]",
+            style: { color: "var(--ide-text-secondary)" },
+            onClick: () => handleCreateDir(contextMenu.parentPath),
+            children: "New Folder"
+          }, undefined, false, undefined, this),
+          contextMenu.entry && /* @__PURE__ */ jsxDEV2(Fragment, {
+            children: [
+              /* @__PURE__ */ jsxDEV2("div", {
+                className: "mx-2 my-1",
+                style: { borderTop: "1px solid var(--ide-border)" }
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV2("button", {
+                className: "flex w-full items-center gap-2 px-3 py-1.5 text-xs hover:bg-[var(--ide-surface-hover)]",
+                style: { color: "var(--ide-text-secondary)" },
+                onClick: () => handleRename(contextMenu.entry),
+                children: "Rename"
+              }, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV2("button", {
+                className: "flex w-full items-center gap-2 px-3 py-1.5 text-xs hover:bg-[var(--ide-surface-hover)]",
+                style: { color: "var(--ide-error)" },
+                onClick: () => handleDelete(contextMenu.entry),
+                children: "Delete"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+var EXTENSION_ICONS;
+var init_file_explorer = __esm(() => {
+  init_filesystem();
+  init_path_policy();
+  init_use_vibe_ide();
+  EXTENSION_ICONS = {
+    ts: "TS",
+    tsx: "TX",
+    js: "JS",
+    jsx: "JX",
+    json: "{}",
+    css: "#",
+    scss: "#",
+    html: "<>",
+    md: "MD",
+    svg: "SV",
+    png: "IM",
+    jpg: "IM",
+    gif: "IM",
+    vue: "VU",
+    yaml: "YM",
+    yml: "YM",
+    toml: "TM",
+    lock: "LK",
+    txt: "TX"
+  };
+});
+
+// src/react/code-editor.tsx
+var exports_code_editor = {};
+__export(exports_code_editor, {
+  CodeEditor: () => CodeEditor
+});
+import {
+  useCallback as useCallback4,
+  useEffect as useEffect4,
+  useRef as useRef4,
+  useState as useState4
+} from "react";
+import Editor, { loader } from "@monaco-editor/react";
+import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
+function getLanguage(filename) {
+  const ext = filename.split(".").pop()?.toLowerCase() ?? "";
+  return EXTENSION_TO_LANGUAGE[ext] ?? "plaintext";
+}
+function getBasename2(path) {
+  return path.split("/").pop() ?? path;
+}
+function CodeEditor({
+  initialFile = null,
+  onActiveFileChange
+}) {
+  const { webcontainer } = useVibeIde();
+  const instance2 = webcontainer.instance;
+  const coalescer = webcontainer.coalescer;
+  const [tabs, setTabs] = useState4([]);
+  const [activeTab, setActiveTab] = useState4(null);
+  const [editorReady, setEditorReady] = useState4(false);
+  const editorRef = useRef4(null);
+  const monacoRef = useRef4(null);
+  const tabsRef = useRef4([]);
+  const modelsRef = useRef4(new Map);
+  const indicatorTimers = useRef4(new Map);
+  useEffect4(() => {
+    tabsRef.current = tabs;
+  }, [tabs]);
+  const openFile = useCallback4(async (path) => {
+    if (!instance2 || !monacoRef.current)
+      return;
+    const existing = tabsRef.current.find((t) => t.path === path);
+    if (existing) {
+      setActiveTab(path);
+      onActiveFileChange?.(path);
+      return;
+    }
+    try {
+      const content = await instance2.fs.readFile(path, "utf8");
+      const byteSize = new TextEncoder().encode(content).byteLength;
+      const isReadOnly = byteSize > LARGE_FILE_THRESHOLD;
+      const language = getLanguage(getBasename2(path));
+      const uri = monacoRef.current.Uri.parse(`file://${path}`);
+      let model = monacoRef.current.editor.getModel(uri);
+      if (!model) {
+        model = monacoRef.current.editor.createModel(content, language, uri);
+        modelsRef.current.set(path, model);
+      } else {
+        model.setValue(content);
+      }
+      const newTab = {
+        path,
+        name: getBasename2(path),
+        isModified: false,
+        isReadOnly,
+        indicator: isReadOnly ? "Read-only (large file)" : undefined
+      };
+      setTabs((prev) => [...prev, newTab]);
+      setActiveTab(path);
+      onActiveFileChange?.(path);
+    } catch (e) {
+      console.error(`CodeEditor: failed to open ${path}`, e);
+    }
+  }, [instance2, onActiveFileChange]);
+  useEffect4(() => {
+    if (initialFile && editorReady && instance2) {
+      openFile(initialFile);
+    }
+  }, [initialFile, editorReady, instance2, openFile]);
+  const closeTab = useCallback4((path) => {
+    const model = modelsRef.current.get(path);
+    if (model) {
+      model.dispose();
+      modelsRef.current.delete(path);
+    }
+    const timer = indicatorTimers.current.get(path);
+    if (timer) {
+      window.clearTimeout(timer);
+      indicatorTimers.current.delete(path);
+    }
+    setTabs((prev) => {
+      const next = prev.filter((t) => t.path !== path);
+      if (activeTab === path) {
+        const newActive = next.length > 0 ? next[next.length - 1].path : null;
+        queueMicrotask(() => {
+          setActiveTab(newActive);
+          onActiveFileChange?.(newActive);
+        });
+      }
+      return next;
+    });
+  }, [activeTab, onActiveFileChange]);
+  const handleEditorBeforeMount = useCallback4((m) => {
+    monacoRef.current = m;
+    m.languages.typescript.typescriptDefaults.setCompilerOptions({
+      target: m.languages.typescript.ScriptTarget.ESNext,
+      module: m.languages.typescript.ModuleKind.ESNext,
+      moduleResolution: m.languages.typescript.ModuleResolutionKind.NodeJs,
+      jsx: m.languages.typescript.JsxEmit.ReactJSX,
+      esModuleInterop: true,
+      allowJs: true,
+      strict: true
+    });
+    m.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
+      noSemanticValidation: true,
+      noSyntaxValidation: false
+    });
+  }, []);
+  const handleEditorMount = useCallback4((editor) => {
+    editorRef.current = editor;
+    setEditorReady(true);
+    editor.onDidChangeModelContent(() => {
+      const model = editor.getModel();
+      if (!model)
+        return;
+      const path = model.uri.path;
+      const currentTabs = tabsRef.current;
+      const tab = currentTabs.find((t) => t.path === path);
+      if (!tab)
+        return;
+      const content = model.getValue();
+      setTabs((prev) => prev.map((t) => t.path === path ? { ...t, isModified: true } : t));
+      if (tab.isReadOnly)
+        return;
+      if (coalescer) {
+        coalescer.write(path, content);
+      } else if (instance2) {
+        instance2.fs.writeFile(path, content).catch((e) => {
+          console.error(`CodeEditor: write failed for ${path}`, e);
+        });
+      }
+    });
+  }, [coalescer, instance2]);
+  useEffect4(() => {
+    if (!editorRef.current || !monacoRef.current)
+      return;
+    if (!activeTab) {
+      editorRef.current.setModel(null);
+      editorRef.current.updateOptions({ readOnly: true });
+      return;
+    }
+    const uri = monacoRef.current.Uri.parse(`file://${activeTab}`);
+    const model = monacoRef.current.editor.getModel(uri);
+    if (model && editorRef.current.getModel() !== model) {
+      editorRef.current.setModel(model);
+    }
+    const tab = tabs.find((t) => t.path === activeTab);
+    editorRef.current.updateOptions({ readOnly: tab?.isReadOnly ?? false });
+  }, [activeTab, tabs]);
+  useEffect4(() => {
+    if (!coalescer)
+      return;
+    const unsub = coalescer.onWrite((writtenPath) => {
+      const model = modelsRef.current.get(writtenPath);
+      if (!model || !instance2)
+        return;
+      const isActivelyEditing = activeTab === writtenPath && editorRef.current?.hasTextFocus();
+      if (isActivelyEditing)
+        return;
+      instance2.fs.readFile(writtenPath, "utf8").then((newContent) => {
+        if (model.getValue() !== newContent) {
+          model.setValue(newContent);
+          setTabs((prev) => prev.map((t) => t.path === writtenPath ? { ...t, indicator: "Agent modified", isModified: false } : t));
+          const existing = indicatorTimers.current.get(writtenPath);
+          if (existing)
+            window.clearTimeout(existing);
+          indicatorTimers.current.set(writtenPath, window.setTimeout(() => {
+            setTabs((prev) => prev.map((t) => t.path === writtenPath ? { ...t, indicator: undefined } : t));
+            indicatorTimers.current.delete(writtenPath);
+          }, 3000));
+        }
+      }).catch(() => {});
+    });
+    return unsub;
+  }, [coalescer, instance2, activeTab]);
+  useEffect4(() => {
+    if (!coalescer)
+      return;
+    const unsub = coalescer.onDelete((deletedPath) => {
+      setTabs((prev) => {
+        const toClose = prev.filter((t) => t.path === deletedPath || t.path.startsWith(deletedPath + "/"));
+        if (toClose.length === 0)
+          return prev;
+        for (const tab of toClose) {
+          const model = modelsRef.current.get(tab.path);
+          if (model) {
+            model.dispose();
+            modelsRef.current.delete(tab.path);
+          }
+          const timer = indicatorTimers.current.get(tab.path);
+          if (timer) {
+            window.clearTimeout(timer);
+            indicatorTimers.current.delete(tab.path);
+          }
+        }
+        const closedPaths = new Set(toClose.map((t) => t.path));
+        const remaining = prev.filter((t) => !closedPaths.has(t.path));
+        if (activeTab && closedPaths.has(activeTab)) {
+          const newActive = remaining.length > 0 ? remaining[remaining.length - 1].path : null;
+          queueMicrotask(() => {
+            setActiveTab(newActive);
+            onActiveFileChange?.(newActive);
+          });
+        }
+        return remaining;
+      });
+    });
+    return unsub;
+  }, [coalescer, activeTab, onActiveFileChange]);
+  useEffect4(() => {
+    return () => {
+      for (const model of modelsRef.current.values()) {
+        model.dispose();
+      }
+      modelsRef.current.clear();
+      for (const timer of indicatorTimers.current.values()) {
+        window.clearTimeout(timer);
+      }
+      indicatorTimers.current.clear();
+    };
+  }, []);
+  return /* @__PURE__ */ jsxDEV3("div", {
+    className: "flex h-full w-full flex-col",
+    style: { background: "var(--ide-surface)" },
+    children: [
+      tabs.length > 0 && /* @__PURE__ */ jsxDEV3("div", {
+        className: "flex h-8 shrink-0 items-center gap-0 overflow-x-auto",
+        style: {
+          background: "var(--ide-bg)",
+          borderBottom: "1px solid var(--ide-border)"
+        },
+        children: tabs.map((tab) => /* @__PURE__ */ jsxDEV3("div", {
+          className: "group flex h-full shrink-0 items-center gap-1.5 px-3 text-xs cursor-pointer",
+          style: {
+            borderRight: "1px solid var(--ide-border)",
+            background: activeTab === tab.path ? "var(--ide-surface)" : "transparent",
+            color: activeTab === tab.path ? "var(--ide-text)" : "var(--ide-text-tertiary)"
+          },
+          onClick: () => {
+            setActiveTab(tab.path);
+            onActiveFileChange?.(tab.path);
+          },
+          children: [
+            tab.isModified && /* @__PURE__ */ jsxDEV3("span", {
+              className: "inline-block h-1.5 w-1.5 shrink-0 rounded-full",
+              style: { background: "var(--ide-accent)" }
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV3("span", {
+              className: "truncate max-w-[120px]",
+              children: tab.name
+            }, undefined, false, undefined, this),
+            tab.indicator && /* @__PURE__ */ jsxDEV3("span", {
+              className: "text-[9px] italic",
+              style: { color: "var(--ide-accent-muted)" },
+              children: tab.indicator
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV3("button", {
+              className: "ml-1 flex h-4 w-4 shrink-0 items-center justify-center rounded opacity-0 group-hover:opacity-100",
+              style: { color: "var(--ide-text-tertiary)" },
+              onClick: (e) => {
+                e.stopPropagation();
+                closeTab(tab.path);
+              },
+              title: "Close",
+              children: /* @__PURE__ */ jsxDEV3("svg", {
+                width: "8",
+                height: "8",
+                viewBox: "0 0 8 8",
+                stroke: "currentColor",
+                strokeWidth: "1.5",
+                children: [
+                  /* @__PURE__ */ jsxDEV3("line", {
+                    x1: "1",
+                    y1: "1",
+                    x2: "7",
+                    y2: "7"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV3("line", {
+                    x1: "7",
+                    y1: "1",
+                    x2: "1",
+                    y2: "7"
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            }, undefined, false, undefined, this)
+          ]
+        }, tab.path, true, undefined, this))
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV3("div", {
+        className: "relative flex-1 overflow-hidden",
+        children: [
+          /* @__PURE__ */ jsxDEV3(Editor, {
+            theme: "vs-dark",
+            beforeMount: handleEditorBeforeMount,
+            onMount: handleEditorMount,
+            options: {
+              fontSize: 13,
+              fontFamily: "'JetBrains Mono', 'Fira Code', 'SF Mono', Menlo, monospace",
+              fontLigatures: true,
+              minimap: { enabled: false },
+              scrollBeyondLastLine: false,
+              smoothScrolling: true,
+              cursorSmoothCaretAnimation: "on",
+              renderWhitespace: "selection",
+              bracketPairColorization: { enabled: true },
+              automaticLayout: true,
+              tabSize: 2,
+              wordWrap: "on",
+              padding: { top: 8 },
+              lineNumbersMinChars: 3,
+              glyphMargin: false,
+              folding: true,
+              links: true,
+              contextmenu: true,
+              quickSuggestions: true,
+              suggestOnTriggerCharacters: true,
+              acceptSuggestionOnCommitCharacter: true,
+              wordBasedSuggestions: "currentDocument",
+              readOnly: activeTab == null ? true : tabs.find((tab) => tab.path === activeTab)?.isReadOnly ?? false
+            }
+          }, undefined, false, undefined, this),
+          tabs.length === 0 && /* @__PURE__ */ jsxDEV3("div", {
+            className: "absolute inset-0 flex items-center justify-center",
+            style: { background: "var(--ide-surface)" },
+            children: /* @__PURE__ */ jsxDEV3("div", {
+              className: "flex flex-col items-center justify-center gap-3",
+              children: [
+                /* @__PURE__ */ jsxDEV3("div", {
+                  className: "flex h-12 w-12 items-center justify-center rounded-xl",
+                  style: { background: "var(--ide-accent-soft)" },
+                  children: /* @__PURE__ */ jsxDEV3("svg", {
+                    width: "24",
+                    height: "24",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "var(--ide-accent)",
+                    strokeWidth: "1.5",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    children: [
+                      /* @__PURE__ */ jsxDEV3("polyline", {
+                        points: "16 18 22 12 16 6"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV3("polyline", {
+                        points: "8 6 2 12 8 18"
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this)
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV3("span", {
+                  className: "text-sm",
+                  style: { color: "var(--ide-text-tertiary)" },
+                  children: "Select a file from the explorer to start editing"
+                }, undefined, false, undefined, this)
+              ]
+            }, undefined, true, undefined, this)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+var EXTENSION_TO_LANGUAGE;
+var init_code_editor = __esm(() => {
+  init_use_vibe_ide();
+  init_path_policy();
+  loader.config({ paths: { vs: "/monaco-editor/min/vs" } });
+  EXTENSION_TO_LANGUAGE = {
+    ts: "typescript",
+    tsx: "typescript",
+    js: "javascript",
+    jsx: "javascript",
+    mjs: "javascript",
+    cjs: "javascript",
+    json: "json",
+    css: "css",
+    scss: "scss",
+    less: "less",
+    html: "html",
+    htm: "html",
+    xml: "xml",
+    svg: "xml",
+    md: "markdown",
+    yaml: "yaml",
+    yml: "yaml",
+    toml: "ini",
+    sh: "shell",
+    bash: "shell",
+    vue: "html",
+    graphql: "graphql",
+    gql: "graphql",
+    sql: "sql",
+    py: "python",
+    rb: "ruby",
+    go: "go",
+    rs: "rust",
+    java: "java",
+    kt: "kotlin",
+    swift: "swift",
+    c: "c",
+    cpp: "cpp",
+    h: "cpp",
+    cs: "csharp"
+  };
+});
+
+// src/react/terminal-view.tsx
+var exports_terminal_view = {};
+__export(exports_terminal_view, {
+  TerminalView: () => TerminalView
+});
+import { useEffect as useEffect5, useRef as useRef5 } from "react";
+import { Terminal } from "@xterm/xterm";
+import"@xterm/xterm/css/xterm.css";
+import { FitAddon } from "@xterm/addon-fit";
+import { WebLinksAddon } from "@xterm/addon-web-links";
+import { jsxDEV as jsxDEV4 } from "react/jsx-dev-runtime";
+function TerminalView({ processRegistry }) {
+  const containerRef = useRef5(null);
+  const termRef = useRef5(null);
+  const fitAddonRef = useRef5(null);
+  const resizeObserverRef = useRef5(null);
+  useEffect5(() => {
+    if (!containerRef.current)
+      return;
+    const term = new Terminal({
+      theme: TERMINAL_THEME,
+      fontFamily: "'JetBrains Mono', 'Fira Code', 'SF Mono', Menlo, monospace",
+      fontSize: 13,
+      lineHeight: 1.4,
+      scrollback: SCROLLBACK,
+      cursorBlink: true,
+      cursorStyle: "bar",
+      allowProposedApi: true,
+      convertEol: true,
+      disableStdin: true
+    });
+    const fitAddon = new FitAddon;
+    term.loadAddon(fitAddon);
+    const webLinksAddon = new WebLinksAddon((_, uri) => {
+      try {
+        const url = new URL(uri);
+        const isLocal = url.hostname === "localhost" || url.hostname === "127.0.0.1" || url.hostname === "0.0.0.0" || url.origin === window.location.origin;
+        if (isLocal) {
+          window.open(uri, "_blank", "noopener,noreferrer");
+        } else {
+          const allow = window.confirm(`Open external link?
+
+${uri}
+
+This link points to an external origin.`);
+          if (allow) {
+            window.open(uri, "_blank", "noopener,noreferrer");
+          }
+        }
+      } catch {}
+    });
+    term.loadAddon(webLinksAddon);
+    import("@xterm/addon-webgl").then(({ WebglAddon }) => {
+      try {
+        const webglAddon = new WebglAddon;
+        webglAddon.onContextLoss(() => {
+          webglAddon.dispose();
+        });
+        term.loadAddon(webglAddon);
+      } catch {}
+    }).catch(() => {});
+    term.open(containerRef.current);
+    requestAnimationFrame(() => {
+      fitAddon.fit();
+    });
+    termRef.current = term;
+    fitAddonRef.current = fitAddon;
+    const observer = new ResizeObserver(() => {
+      requestAnimationFrame(() => {
+        try {
+          fitAddon.fit();
+        } catch {}
+      });
+    });
+    observer.observe(containerRef.current);
+    resizeObserverRef.current = observer;
+    term.writeln("\x1B[90m--- Terminal ready ---\x1B[0m");
+    return () => {
+      observer.disconnect();
+      term.dispose();
+      termRef.current = null;
+      fitAddonRef.current = null;
+    };
+  }, []);
+  useEffect5(() => {
+    if (!processRegistry || !termRef.current)
+      return;
+    const term = termRef.current;
+    const unsub = processRegistry.onOutput((_key, chunk) => {
+      term.write(chunk);
+    });
+    return unsub;
+  }, [processRegistry]);
+  return /* @__PURE__ */ jsxDEV4("div", {
+    className: "h-full w-full overflow-hidden",
+    style: { background: TERMINAL_THEME.background },
+    children: /* @__PURE__ */ jsxDEV4("div", {
+      ref: containerRef,
+      className: "h-full w-full",
+      style: { padding: "8px 4px 4px 8px" }
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+var SCROLLBACK = 5000, TERMINAL_THEME;
+var init_terminal_view = __esm(() => {
+  TERMINAL_THEME = {
+    background: "#18181b",
+    foreground: "#fafafa",
+    cursor: "#fafafa",
+    cursorAccent: "#18181b",
+    selectionBackground: "rgba(234, 179, 8, 0.2)",
+    selectionForeground: "#fafafa",
+    black: "#09090b",
+    red: "#ef4444",
+    green: "#22c55e",
+    yellow: "#f59e0b",
+    blue: "#3b82f6",
+    magenta: "#a855f7",
+    cyan: "#06b6d4",
+    white: "#fafafa",
+    brightBlack: "#71717a",
+    brightRed: "#f87171",
+    brightGreen: "#4ade80",
+    brightYellow: "#fbbf24",
+    brightBlue: "#60a5fa",
+    brightMagenta: "#c084fc",
+    brightCyan: "#22d3ee",
+    brightWhite: "#ffffff"
+  };
+});
+
+// src/power-user.ts
+init_file_explorer();
+init_code_editor();
+init_terminal_view();
+export {
+  TerminalView,
+  FileExplorer,
+  CodeEditor
+};