diorama-js 0.1.0

package/dist/vue.js

@@ -0,0 +1,2324 @@
+import { defineComponent, ref, onMounted, onUnmounted, watch, h } from 'vue';
+
+// src/adapters/vue.ts
+
+// src/errors.ts
+var DioramaError = class extends Error {
+  code;
+  constructor(code, message) {
+    super(message);
+    this.name = "DioramaError";
+    this.code = code;
+    Object.setPrototypeOf(this, new.target.prototype);
+  }
+};
+var RepoNotFoundError = class extends DioramaError {
+  constructor(owner, repo) {
+    super(
+      "REPO_NOT_FOUND",
+      `Repository ${owner}/${repo} not found. Make sure it's a public repository.`
+    );
+    this.name = "RepoNotFoundError";
+  }
+};
+var BranchNotFoundError = class extends DioramaError {
+  constructor(owner, repo, branch) {
+    super(
+      "BRANCH_NOT_FOUND",
+      `Branch '${branch}' not found in ${owner}/${repo}.`
+    );
+    this.name = "BranchNotFoundError";
+  }
+};
+var RateLimitError = class extends DioramaError {
+  resetAt;
+  constructor(resetTimestamp) {
+    const resetAt = resetTimestamp ? new Date(resetTimestamp * 1e3) : null;
+    const resetMsg = resetAt ? ` Wait until ${resetAt.toLocaleTimeString()} or pass a GitHub token to increase the limit.` : " Pass a GitHub token to increase the limit, or wait and try again.";
+    super("RATE_LIMIT", `GitHub API rate limit exceeded.${resetMsg}`);
+    this.name = "RateLimitError";
+    this.resetAt = resetAt;
+  }
+};
+var NetworkError = class extends DioramaError {
+  constructor(message = "A network error occurred. Check your connection and try again.") {
+    super("NETWORK_ERROR", message);
+    this.name = "NetworkError";
+  }
+};
+var NodeBuiltinError = class extends DioramaError {
+  moduleName;
+  constructor(moduleName) {
+    super(
+      "NODE_BUILTIN",
+      `This project imports '${moduleName}' which is a Node.js built-in. Diorama only supports browser-compatible projects.`
+    );
+    this.name = "NodeBuiltinError";
+    this.moduleName = moduleName;
+  }
+};
+var TranspileError = class extends DioramaError {
+  file;
+  line;
+  column;
+  constructor(message, file, line, column) {
+    super("TRANSPILE_FAILED", message);
+    this.name = "TranspileError";
+    this.file = file;
+    this.line = line;
+    this.column = column;
+  }
+};
+var TranspilerLoadError = class extends DioramaError {
+  constructor(message = "Failed to load the transpiler. Check your network connection.") {
+    super("TRANSPILER_LOAD_FAILED", message);
+    this.name = "TranspilerLoadError";
+  }
+};
+var AssemblyError = class extends DioramaError {
+  constructor(message) {
+    super("ASSEMBLY_FAILED", message);
+    this.name = "AssemblyError";
+  }
+};
+var EntryPointError = class extends DioramaError {
+  constructor(message = "No entry point found. Diorama looks for index.html, src/index.jsx, src/index.tsx, or src/index.js.") {
+    super("NO_ENTRY_POINT", message);
+    this.name = "EntryPointError";
+  }
+};
+
+// src/core/resolver.ts
+var GITHUB_API = "https://api.github.com";
+var RAW_BASE = "https://raw.githubusercontent.com";
+var BINARY_EXTENSIONS = /* @__PURE__ */ new Set([
+  ".png",
+  ".jpg",
+  ".jpeg",
+  ".gif",
+  ".ico",
+  ".webp",
+  ".woff",
+  ".woff2",
+  ".ttf",
+  ".eot",
+  ".otf",
+  ".mp3",
+  ".mp4",
+  ".ogg",
+  ".wav",
+  ".webm",
+  ".pdf",
+  ".zip"
+]);
+var DEFAULT_SKIP_DIRS = [
+  "node_modules/",
+  ".git/",
+  ".github/",
+  "__tests__/"
+];
+var DEFAULT_SKIP_FILES = [
+  "README.md",
+  "LICENSE",
+  "LICENSE.md",
+  ".gitignore",
+  ".env",
+  ".env.local",
+  ".env.production",
+  "package-lock.json",
+  "yarn.lock",
+  "pnpm-lock.yaml"
+];
+var DEFAULT_SKIP_PATTERNS = [
+  /\.test\.\w+$/,
+  /\.spec\.\w+$/
+];
+function parseGitHubURL(input) {
+  let cleaned = input.trim();
+  cleaned = cleaned.replace(/^https?:\/\//, "").replace(/^www\./, "");
+  cleaned = cleaned.replace(/^github\.com\//, "");
+  cleaned = cleaned.replace(/\/+$/, "");
+  const parts = cleaned.split("/");
+  if (parts.length < 2 || !parts[0] || !parts[1]) {
+    throw new RepoNotFoundError(parts[0] ?? "", parts[1] ?? "");
+  }
+  const owner = parts[0];
+  const repo = parts[1];
+  if (parts.length === 2) {
+    return { owner, repo };
+  }
+  if (parts[2] === "tree" && parts.length >= 4) {
+    const branch = parts[3];
+    const subdirectory = parts.length > 4 ? parts.slice(4).join("/") : void 0;
+    return { owner, repo, branch, subdirectory };
+  }
+  return { owner, repo };
+}
+var Semaphore = class {
+  constructor(concurrency) {
+    this.concurrency = concurrency;
+  }
+  queue = [];
+  active = 0;
+  async acquire() {
+    if (this.active < this.concurrency) {
+      this.active++;
+      return;
+    }
+    return new Promise((resolve) => {
+      this.queue.push(() => {
+        this.active++;
+        resolve();
+      });
+    });
+  }
+  release() {
+    this.active--;
+    const next = this.queue.shift();
+    if (next) next();
+  }
+};
+function extensionOf(path) {
+  const dot = path.lastIndexOf(".");
+  return dot === -1 ? "" : path.slice(dot).toLowerCase();
+}
+function isBinary(path) {
+  return BINARY_EXTENSIONS.has(extensionOf(path));
+}
+function shouldSkip(path, extraExclude) {
+  for (const dir of DEFAULT_SKIP_DIRS) {
+    if (path.startsWith(dir) || path.includes(`/${dir}`)) return true;
+  }
+  for (const file of DEFAULT_SKIP_FILES) {
+    if (path === file) return true;
+  }
+  for (const pattern of DEFAULT_SKIP_PATTERNS) {
+    if (pattern.test(path)) return true;
+  }
+  if (extraExclude) {
+    for (const ex of extraExclude) {
+      if (path.includes(ex)) return true;
+    }
+  }
+  return false;
+}
+function authHeaders(token) {
+  const headers = {
+    Accept: "application/vnd.github.v3+json"
+  };
+  if (token) {
+    headers["Authorization"] = `token ${token}`;
+  }
+  return headers;
+}
+async function resolveProject(urlOrShorthand, options = {}) {
+  const parsed = parseGitHubURL(urlOrShorthand);
+  const { owner, repo } = parsed;
+  const branch = options.branch ?? parsed.branch;
+  const subdirectory = options.subdirectory ?? parsed.subdirectory;
+  const token = options.githubToken;
+  const concurrency = options.maxConcurrentFetches ?? 6;
+  const resolvedBranch = branch ?? await resolveDefaultBranch(owner, repo, token);
+  const tree = await fetchTree(owner, repo, resolvedBranch, token);
+  let paths = tree.paths.filter((p) => !shouldSkip(p, options.exclude));
+  if (subdirectory) {
+    const prefix = subdirectory.endsWith("/") ? subdirectory : `${subdirectory}/`;
+    paths = paths.filter((p) => p.startsWith(prefix)).map((p) => p.slice(prefix.length));
+  }
+  const sem = new Semaphore(concurrency);
+  const files = /* @__PURE__ */ new Map();
+  const binaryFiles = /* @__PURE__ */ new Map();
+  const fetchJobs = paths.map(async (relativePath) => {
+    await sem.acquire();
+    try {
+      const rawPath = subdirectory ? `${subdirectory}/${relativePath}` : relativePath;
+      const url = `${RAW_BASE}/${owner}/${repo}/${resolvedBranch}/${rawPath}`;
+      if (isBinary(relativePath)) {
+        const res = await fetch(url);
+        if (!res.ok) return;
+        const blob = await res.blob();
+        binaryFiles.set(relativePath, blob);
+      } else {
+        const res = await fetch(url);
+        if (!res.ok) return;
+        const text = await res.text();
+        files.set(relativePath, text);
+      }
+    } catch {
+    } finally {
+      sem.release();
+    }
+  });
+  await Promise.all(fetchJobs);
+  return {
+    owner,
+    repo,
+    branch: resolvedBranch,
+    sha: tree.sha,
+    files,
+    binaryFiles
+  };
+}
+async function resolveDefaultBranch(owner, repo, token) {
+  const url = `${GITHUB_API}/repos/${owner}/${repo}`;
+  const res = await safeFetch(url, authHeaders(token));
+  if (res.status === 404) {
+    throw new RepoNotFoundError(owner, repo);
+  }
+  handleRateLimit(res);
+  if (!res.ok) {
+    throw new NetworkError(`GitHub API returned ${res.status} for ${url}`);
+  }
+  const data = await res.json();
+  return data.default_branch;
+}
+async function fetchTree(owner, repo, branch, token) {
+  const url = `${GITHUB_API}/repos/${owner}/${repo}/git/trees/${branch}?recursive=1`;
+  const res = await safeFetch(url, authHeaders(token));
+  if (res.status === 404) {
+    throw new BranchNotFoundError(owner, repo, branch);
+  }
+  handleRateLimit(res);
+  if (!res.ok) {
+    throw new NetworkError(`GitHub API returned ${res.status} fetching tree for ${owner}/${repo}`);
+  }
+  const data = await res.json();
+  const paths = data.tree.filter((entry) => entry.type === "blob").map((entry) => entry.path);
+  return { sha: data.sha, paths };
+}
+function handleRateLimit(res) {
+  if (res.status === 403 || res.status === 429) {
+    const resetHeader = res.headers.get("x-ratelimit-reset");
+    const remaining = res.headers.get("x-ratelimit-remaining");
+    if (remaining === "0" || res.status === 429) {
+      throw new RateLimitError(
+        resetHeader ? parseInt(resetHeader, 10) : void 0
+      );
+    }
+  }
+}
+async function safeFetch(url, headers) {
+  try {
+    return await fetch(url, { headers });
+  } catch (err) {
+    throw new NetworkError(
+      `Network request failed for ${url}: ${err instanceof Error ? err.message : String(err)}`
+    );
+  }
+}
+
+// src/core/cache.ts
+var CACHE_PREFIX = "diorama:";
+var CACHE_META_KEY = "diorama:__meta__";
+var CacheManager = class {
+  enabled;
+  ttl;
+  _strategy;
+  constructor(options = {}) {
+    this.enabled = options.enabled ?? true;
+    this.ttl = (options.ttl ?? 3600) * 1e3;
+    this._strategy = options.strategy ?? "normal";
+  }
+  // ─── Public API ────────────────────────────────────────────
+  /**
+   * Try to read a cached project.
+   * Returns `null` on miss, expiry, or if caching is disabled.
+   */
+  get(owner, repo, sha) {
+    if (!this.enabled) return null;
+    try {
+      const key = this.cacheKey(owner, repo);
+      const raw = localStorage.getItem(key);
+      if (!raw) return null;
+      const entry = JSON.parse(raw);
+      if (entry.sha !== sha) return null;
+      if (Date.now() - entry.timestamp > this.ttl) return null;
+      return this.deserialize(entry);
+    } catch {
+      return null;
+    }
+  }
+  /**
+   * For aggressive strategy: check if we have a recently-cached SHA
+   * so we can skip even the tree API call.
+   */
+  getCachedSHA(owner, repo) {
+    if (!this.enabled || this._strategy !== "aggressive") return null;
+    try {
+      const key = this.cacheKey(owner, repo);
+      const raw = localStorage.getItem(key);
+      if (!raw) return null;
+      const entry = JSON.parse(raw);
+      const aggressiveTTL = 5 * 60 * 1e3;
+      if (Date.now() - entry.timestamp > aggressiveTTL) return null;
+      return entry.sha;
+    } catch {
+      return null;
+    }
+  }
+  /**
+   * Store a resolved project in cache.
+   * Silently handles quota errors by evicting old entries.
+   */
+  async set(project) {
+    if (!this.enabled) return;
+    const entry = await this.serialize(project);
+    const key = this.cacheKey(project.owner, project.repo);
+    try {
+      this.writeEntry(key, entry, project.owner, project.repo);
+    } catch (err) {
+      if (isQuotaError(err)) {
+        this.evictOldest();
+        try {
+          this.writeEntry(key, entry, project.owner, project.repo);
+        } catch {
+          console.warn("[Diorama] Cache quota exceeded; skipping cache write.");
+        }
+      }
+    }
+  }
+  /** Clear cache for a specific repo or all cached projects. */
+  clear(repoSlug) {
+    if (repoSlug) {
+      const key = `${CACHE_PREFIX}${repoSlug}`;
+      localStorage.removeItem(key);
+      this.removeFromMeta(repoSlug);
+    } else {
+      const meta = this.getMeta();
+      for (const slug of Object.keys(meta.entries)) {
+        localStorage.removeItem(`${CACHE_PREFIX}${slug}`);
+      }
+      localStorage.removeItem(CACHE_META_KEY);
+    }
+  }
+  // ─── Internal helpers ──────────────────────────────────────
+  cacheKey(owner, repo) {
+    return `${CACHE_PREFIX}${owner}/${repo}`;
+  }
+  async serialize(project) {
+    const files = {};
+    for (const [path, content] of project.files) {
+      files[path] = content;
+    }
+    const binaryFiles = {};
+    for (const [path, blob] of project.binaryFiles) {
+      binaryFiles[path] = await blobToBase64(blob);
+    }
+    return {
+      sha: project.sha,
+      owner: project.owner,
+      repo: project.repo,
+      branch: project.branch,
+      files,
+      binaryFiles,
+      timestamp: Date.now()
+    };
+  }
+  deserialize(entry) {
+    const files = /* @__PURE__ */ new Map();
+    for (const [path, content] of Object.entries(entry.files)) {
+      files.set(path, content);
+    }
+    const binaryFiles = /* @__PURE__ */ new Map();
+    for (const [path, dataURL] of Object.entries(entry.binaryFiles)) {
+      binaryFiles.set(path, base64ToBlob(dataURL));
+    }
+    return {
+      owner: entry.owner,
+      repo: entry.repo,
+      branch: entry.branch,
+      sha: entry.sha,
+      files,
+      binaryFiles
+    };
+  }
+  writeEntry(key, entry, owner, repo) {
+    localStorage.setItem(key, JSON.stringify(entry));
+    this.updateMeta(`${owner}/${repo}`);
+  }
+  getMeta() {
+    try {
+      const raw = localStorage.getItem(CACHE_META_KEY);
+      return raw ? JSON.parse(raw) : { entries: {} };
+    } catch {
+      return { entries: {} };
+    }
+  }
+  updateMeta(slug) {
+    const meta = this.getMeta();
+    meta.entries[slug] = Date.now();
+    localStorage.setItem(CACHE_META_KEY, JSON.stringify(meta));
+  }
+  removeFromMeta(slug) {
+    const meta = this.getMeta();
+    delete meta.entries[slug];
+    localStorage.setItem(CACHE_META_KEY, JSON.stringify(meta));
+  }
+  evictOldest() {
+    const meta = this.getMeta();
+    const entries = Object.entries(meta.entries);
+    if (entries.length === 0) return;
+    entries.sort((a, b) => a[1] - b[1]);
+    const [oldestSlug] = entries[0];
+    localStorage.removeItem(`${CACHE_PREFIX}${oldestSlug}`);
+    delete meta.entries[oldestSlug];
+    localStorage.setItem(CACHE_META_KEY, JSON.stringify(meta));
+  }
+};
+function blobToBase64(blob) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onloadend = () => resolve(reader.result);
+    reader.onerror = reject;
+    reader.readAsDataURL(blob);
+  });
+}
+function base64ToBlob(dataURL) {
+  const [header, data] = dataURL.split(",");
+  const mime = header.match(/:(.*?);/)?.[1] ?? "application/octet-stream";
+  const binary = atob(data);
+  const bytes = new Uint8Array(binary.length);
+  for (let i = 0; i < binary.length; i++) {
+    bytes[i] = binary.charCodeAt(i);
+  }
+  return new Blob([bytes], { type: mime });
+}
+function isQuotaError(err) {
+  return err instanceof DOMException && (err.name === "QuotaExceededError" || err.code === 22 || err.code === 1014);
+}
+
+// src/core/analyzer.ts
+var HTML_ENTRY_CANDIDATES = [
+  "index.html",
+  "public/index.html",
+  "src/index.html"
+];
+var JS_ENTRY_CANDIDATES = [
+  "src/main.jsx",
+  "src/main.tsx",
+  "src/main.js",
+  "src/main.ts",
+  "src/index.jsx",
+  "src/index.tsx",
+  "src/index.js",
+  "src/index.ts",
+  "src/App.jsx",
+  "src/App.tsx",
+  "src/App.js",
+  "src/App.ts",
+  "index.js",
+  "index.ts",
+  "index.jsx",
+  "index.tsx"
+];
+var BARE_IMPORT_RE = /(?:^|\n)\s*import\s+[\s\S]*?from\s*['"]([^./'"][^'"]*)['"]/;
+var NODE_BUILTINS = /* @__PURE__ */ new Set([
+  "assert",
+  "buffer",
+  "child_process",
+  "cluster",
+  "crypto",
+  "dgram",
+  "dns",
+  "events",
+  "fs",
+  "http",
+  "http2",
+  "https",
+  "net",
+  "os",
+  "path",
+  "perf_hooks",
+  "process",
+  "querystring",
+  "readline",
+  "stream",
+  "string_decoder",
+  "tls",
+  "tty",
+  "url",
+  "util",
+  "v8",
+  "vm",
+  "worker_threads",
+  "zlib"
+]);
+function analyzeProject(project, overrideType, overrideEntry) {
+  const { files } = project;
+  let dependencies = {};
+  let devDependencies = {};
+  const pkgRaw = files.get("package.json");
+  if (pkgRaw) {
+    try {
+      const pkg = JSON.parse(pkgRaw);
+      dependencies = pkg.dependencies ?? {};
+      devDependencies = pkg.devDependencies ?? {};
+    } catch {
+    }
+  }
+  const allDeps = { ...devDependencies, ...dependencies };
+  let framework = "none";
+  if ("react" in dependencies || "react-dom" in dependencies) {
+    framework = "react";
+  } else if ("preact" in dependencies) {
+    framework = "preact";
+  } else if ("solid-js" in dependencies) {
+    framework = "solid";
+  }
+  const paths = Array.from(files.keys());
+  const hasJSX = paths.some((p) => p.endsWith(".jsx") || p.endsWith(".tsx"));
+  const hasTypeScript = paths.some((p) => p.endsWith(".ts") || p.endsWith(".tsx")) || "typescript" in allDeps;
+  const hasViteConfig = paths.some(
+    (p) => /^vite\.config\.(js|ts|mjs|mts)$/.test(p)
+  );
+  const hasViteDep = "vite" in allDeps;
+  const isVite = hasViteConfig || hasViteDep;
+  let htmlEntry = overrideEntry ?? null;
+  if (!htmlEntry) {
+    for (const candidate of HTML_ENTRY_CANDIDATES) {
+      if (files.has(candidate)) {
+        htmlEntry = candidate;
+        break;
+      }
+    }
+  }
+  if (!htmlEntry) {
+    const rootHtmlFiles = paths.filter(
+      (p) => !p.includes("/") && p.endsWith(".html")
+    );
+    if (rootHtmlFiles.length === 1) {
+      htmlEntry = rootHtmlFiles[0];
+    }
+  }
+  let jsEntry;
+  for (const candidate of JS_ENTRY_CANDIDATES) {
+    if (files.has(candidate)) {
+      jsEntry = candidate;
+      break;
+    }
+  }
+  if (htmlEntry && !jsEntry) {
+    const htmlContent = files.get(htmlEntry);
+    if (htmlContent) {
+      const scriptMatch = htmlContent.match(
+        /<script[^>]+src=["']([^"']+)["']/
+      );
+      if (scriptMatch) {
+        let src = scriptMatch[1];
+        if (src.startsWith("/")) {
+          src = src.slice(1);
+        }
+        jsEntry = src;
+      }
+    }
+  }
+  if (!htmlEntry && !jsEntry) {
+    throw new EntryPointError();
+  }
+  if (!htmlEntry) {
+    htmlEntry = "__generated__/index.html";
+  }
+  let type = overrideType ?? detectProjectType({
+    hasPkg: !!pkgRaw,
+    hasJSX,
+    hasTypeScript,
+    hasBareImports: hasBareImports(files),
+    isVite
+  });
+  return {
+    type,
+    entryPoint: htmlEntry,
+    dependencies,
+    framework,
+    hasJSX,
+    hasTypeScript,
+    jsEntryPoint: jsEntry,
+    isVite
+  };
+}
+function detectProjectType(input) {
+  const { hasPkg, hasJSX, hasTypeScript, hasBareImports: hasBareImports2, isVite } = input;
+  if (isVite) return "vite";
+  if (hasJSX && hasTypeScript) return "jsx-typescript";
+  if (hasJSX) return "jsx";
+  if (hasTypeScript) return "typescript";
+  if (hasPkg || hasBareImports2) return "static-esm";
+  return "static";
+}
+function hasBareImports(files) {
+  for (const [path, content] of files) {
+    if (/\.(js|ts|jsx|tsx|mjs)$/.test(path)) {
+      if (BARE_IMPORT_RE.test(content)) {
+        return true;
+      }
+    }
+  }
+  return false;
+}
+
+// src/core/sandbox.ts
+function buildErrorHTML(message) {
+  return `<!DOCTYPE html>
+<html>
+<head><meta charset="UTF-8"></head>
+<body style="margin:0;font-family:system-ui,-apple-system,sans-serif;display:flex;align-items:center;justify-content:center;min-height:100vh;background:#fef2f2;">
+  <div style="max-width:540px;padding:32px;text-align:center;">
+    <h2 style="margin:0 0 12px;color:#dc2626;font-size:20px;">Diorama: Render error</h2>
+    <p style="margin:0 0 16px;color:#333;font-size:15px;line-height:1.5;">${escapeHTML(message)}</p>
+    <p style="margin:0;color:#888;font-size:13px;">
+      This project may use features not supported by Diorama.
+      <a href="https://github.com/becca/diorama#supported-projects" target="_blank" rel="noopener" style="color:#2563eb;">Learn more</a>
+    </p>
+  </div>
+</body>
+</html>`;
+}
+function createSandbox(options) {
+  const {
+    container,
+    html,
+    height = "500px",
+    sandboxFlags = ["allow-scripts"],
+    loading = "eager",
+    frame = "none",
+    expand = false,
+    placeholder,
+    repoName,
+    useBlobURL = false,
+    onLoad,
+    onError
+  } = options;
+  const maybeEl = typeof container === "string" ? document.querySelector(container) : container;
+  if (!maybeEl) {
+    throw new Error(
+      `Diorama: container "${typeof container === "string" ? container : "element"}" not found in the DOM.`
+    );
+  }
+  const el = maybeEl;
+  let blobURL = null;
+  let iframe = null;
+  let observer = null;
+  let destroyed = false;
+  let isExpanded = false;
+  let backdrop = null;
+  let expandBtn = null;
+  let expandEscHandler = null;
+  function buildIframe(content) {
+    const frame2 = document.createElement("iframe");
+    frame2.setAttribute("sandbox", sandboxFlags.join(" "));
+    frame2.setAttribute("loading", "lazy");
+    frame2.setAttribute("aria-label", repoName ? `Preview of ${repoName}` : "Diorama project preview");
+    frame2.style.width = "100%";
+    frame2.style.height = height;
+    frame2.style.border = "none";
+    frame2.style.display = "block";
+    if (useBlobURL) {
+      const blob = new Blob([content], { type: "text/html" });
+      blobURL = URL.createObjectURL(blob);
+      frame2.src = blobURL;
+    } else {
+      frame2.srcdoc = content;
+    }
+    frame2.addEventListener("load", () => {
+      onLoad?.();
+    });
+    return frame2;
+  }
+  function buildPlaceholder(onClick) {
+    const wrapper = document.createElement("div");
+    wrapper.style.position = "relative";
+    wrapper.style.width = "100%";
+    wrapper.style.height = height;
+    wrapper.style.cursor = "pointer";
+    wrapper.style.overflow = "hidden";
+    wrapper.style.borderRadius = "8px";
+    wrapper.style.background = "#f3f4f6";
+    wrapper.style.display = "flex";
+    wrapper.style.alignItems = "center";
+    wrapper.style.justifyContent = "center";
+    wrapper.setAttribute("role", "button");
+    wrapper.setAttribute("tabindex", "0");
+    wrapper.setAttribute("aria-label", "Launch project preview");
+    if (placeholder) {
+      const img = document.createElement("img");
+      img.src = placeholder;
+      img.alt = repoName ? `Preview of ${repoName}` : "Project preview";
+      img.style.width = "100%";
+      img.style.height = "100%";
+      img.style.objectFit = "cover";
+      wrapper.appendChild(img);
+    }
+    const overlay = document.createElement("div");
+    overlay.style.position = "absolute";
+    overlay.style.inset = "0";
+    overlay.style.display = "flex";
+    overlay.style.flexDirection = "column";
+    overlay.style.alignItems = "center";
+    overlay.style.justifyContent = "center";
+    overlay.style.background = placeholder ? "rgba(0,0,0,0.35)" : "transparent";
+    const playBtn = document.createElement("div");
+    playBtn.innerHTML = `<svg width="48" height="48" viewBox="0 0 48 48" fill="none"><circle cx="24" cy="24" r="24" fill="rgba(0,0,0,0.5)"/><polygon points="19,14 19,34 36,24" fill="white"/></svg>`;
+    overlay.appendChild(playBtn);
+    if (repoName && !placeholder) {
+      const label = document.createElement("div");
+      label.textContent = repoName;
+      label.style.marginTop = "12px";
+      label.style.fontSize = "15px";
+      label.style.fontFamily = "system-ui, sans-serif";
+      label.style.color = "#374151";
+      label.style.fontWeight = "500";
+      overlay.appendChild(label);
+    }
+    const hint = document.createElement("div");
+    hint.textContent = "Click to launch preview";
+    hint.style.marginTop = "8px";
+    hint.style.fontSize = "13px";
+    hint.style.fontFamily = "system-ui, sans-serif";
+    hint.style.color = placeholder ? "rgba(255,255,255,0.85)" : "#6b7280";
+    overlay.appendChild(hint);
+    wrapper.appendChild(overlay);
+    wrapper.addEventListener("click", onClick);
+    wrapper.addEventListener("keydown", (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        onClick();
+      }
+    });
+    return wrapper;
+  }
+  function renderIframe(content) {
+    if (destroyed) return;
+    el.innerHTML = "";
+    iframe = buildIframe(content);
+    if (frame !== "none") {
+      const wrapper = buildFrame(iframe, frame, repoName);
+      el.appendChild(wrapper);
+    } else {
+      el.appendChild(iframe);
+    }
+    if (expand) attachExpandButton();
+  }
+  function setupEager() {
+    renderIframe(html);
+  }
+  function setupClick() {
+    const placeholderEl = buildPlaceholder(() => {
+      renderIframe(html);
+    });
+    el.innerHTML = "";
+    el.appendChild(placeholderEl);
+  }
+  function setupViewport() {
+    const placeholderEl = buildPlaceholder(() => {
+      renderIframe(html);
+      observer?.disconnect();
+      observer = null;
+    });
+    el.innerHTML = "";
+    el.appendChild(placeholderEl);
+    observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting) {
+            renderIframe(html);
+            observer?.disconnect();
+            observer = null;
+            break;
+          }
+        }
+      },
+      { threshold: 0.1 }
+    );
+    observer.observe(el);
+  }
+  function expandDiorama() {
+    if (isExpanded || destroyed) return;
+    isExpanded = true;
+    injectExpandStyles();
+    backdrop = document.createElement("div");
+    backdrop.className = "diorama-expand-backdrop";
+    backdrop.setAttribute("aria-label", "Close expanded preview");
+    backdrop.addEventListener("click", collapseDiorama);
+    document.body.appendChild(backdrop);
+    el.classList.add("diorama-expanded");
+    expandEscHandler = (e) => {
+      if (e.key === "Escape") collapseDiorama();
+    };
+    document.addEventListener("keydown", expandEscHandler);
+  }
+  function collapseDiorama() {
+    if (!isExpanded) return;
+    isExpanded = false;
+    backdrop?.remove();
+    backdrop = null;
+    el.classList.remove("diorama-expanded");
+    if (expandEscHandler) {
+      document.removeEventListener("keydown", expandEscHandler);
+      expandEscHandler = null;
+    }
+  }
+  function attachExpandButton() {
+    injectExpandStyles();
+    el.classList.add("diorama-expandable");
+    expandBtn?.remove();
+    expandBtn = document.createElement("button");
+    expandBtn.className = "diorama-expand-btn";
+    expandBtn.setAttribute("aria-label", "Expand preview");
+    expandBtn.innerHTML = '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><polyline points="10,2 14,2 14,6"/><polyline points="6,14 2,14 2,10"/><line x1="14" y1="2" x2="9" y2="7"/><line x1="2" y1="14" x2="7" y2="9"/></svg>';
+    expandBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+      if (!isExpanded) expandDiorama();
+    });
+    el.appendChild(expandBtn);
+  }
+  try {
+    switch (loading) {
+      case "click":
+        setupClick();
+        break;
+      case "viewport":
+        setupViewport();
+        break;
+      case "eager":
+      default:
+        setupEager();
+        break;
+    }
+  } catch (err) {
+    onError?.(err);
+  }
+  return {
+    destroy() {
+      destroyed = true;
+      collapseDiorama();
+      expandBtn?.remove();
+      expandBtn = null;
+      if (blobURL) {
+        URL.revokeObjectURL(blobURL);
+        blobURL = null;
+      }
+      observer?.disconnect();
+      observer = null;
+      el.innerHTML = "";
+      iframe = null;
+    },
+    update(newHTML) {
+      if (destroyed) return;
+      if (blobURL) {
+        URL.revokeObjectURL(blobURL);
+        blobURL = null;
+      }
+      if (iframe) {
+        if (useBlobURL) {
+          const blob = new Blob([newHTML], { type: "text/html" });
+          blobURL = URL.createObjectURL(blob);
+          iframe.src = blobURL;
+        } else {
+          iframe.srcdoc = newHTML;
+        }
+      } else {
+        renderIframe(newHTML);
+      }
+    }
+  };
+}
+function buildFrame(iframe, style, repoName) {
+  const wrapper = document.createElement("div");
+  wrapper.className = `diorama-frame diorama-frame--${style}`;
+  injectFrameStyles();
+  switch (style) {
+    case "polaroid":
+      return buildPolaroidFrame(wrapper, iframe, repoName);
+    case "museum":
+      return buildMuseumFrame(wrapper, iframe);
+    case "standard":
+      return buildStandardFrame(wrapper, iframe);
+    case "terminal":
+      return buildTerminalFrame(wrapper, iframe, repoName);
+    case "postcard":
+      return buildPostcardFrame(wrapper, iframe, repoName);
+    case "blueprint":
+      return buildBlueprintFrame(wrapper, iframe, repoName);
+    case "browser":
+      return buildBrowserFrame(wrapper, iframe, repoName);
+    default:
+      wrapper.appendChild(iframe);
+      return wrapper;
+  }
+}
+function buildPolaroidFrame(wrapper, iframe, repoName) {
+  wrapper.appendChild(iframe);
+  const caption = document.createElement("div");
+  caption.className = "diorama-polaroid-caption";
+  caption.textContent = repoName || "";
+  wrapper.appendChild(caption);
+  return wrapper;
+}
+function buildMuseumFrame(wrapper, iframe) {
+  const mat = document.createElement("div");
+  mat.className = "diorama-museum-mat";
+  mat.appendChild(iframe);
+  wrapper.appendChild(mat);
+  return wrapper;
+}
+function buildStandardFrame(wrapper, iframe) {
+  wrapper.appendChild(iframe);
+  return wrapper;
+}
+function buildTerminalFrame(wrapper, iframe, repoName) {
+  const titlebar = document.createElement("div");
+  titlebar.className = "diorama-terminal-bar";
+  const dots = document.createElement("div");
+  dots.className = "diorama-terminal-dots";
+  dots.innerHTML = "<i></i><i></i><i></i>";
+  titlebar.appendChild(dots);
+  const title = document.createElement("span");
+  title.className = "diorama-terminal-title";
+  title.textContent = repoName || "diorama";
+  titlebar.appendChild(title);
+  wrapper.appendChild(titlebar);
+  wrapper.appendChild(iframe);
+  return wrapper;
+}
+function buildPostcardFrame(wrapper, iframe, repoName) {
+  wrapper.appendChild(iframe);
+  const stamp = document.createElement("div");
+  stamp.className = "diorama-postcard-stamp";
+  stamp.innerHTML = `<span class="diorama-postcard-stamp-text">\u{1F4EE}</span>`;
+  wrapper.appendChild(stamp);
+  const postmark = document.createElement("div");
+  postmark.className = "diorama-postcard-mark";
+  postmark.textContent = repoName || "DIORAMA";
+  wrapper.appendChild(postmark);
+  return wrapper;
+}
+function buildBlueprintFrame(wrapper, iframe, repoName) {
+  wrapper.appendChild(iframe);
+  const label = document.createElement("div");
+  label.className = "diorama-blueprint-label";
+  label.textContent = repoName ? `DRAWING: ${repoName.toUpperCase()}` : "DRAWING: UNTITLED";
+  wrapper.appendChild(label);
+  return wrapper;
+}
+function buildBrowserFrame(wrapper, iframe, repoName) {
+  const bar = document.createElement("div");
+  bar.className = "diorama-browser-bar";
+  const dots = document.createElement("div");
+  dots.className = "diorama-browser-dots";
+  dots.innerHTML = "<i></i><i></i><i></i>";
+  bar.appendChild(dots);
+  const url = document.createElement("div");
+  url.className = "diorama-browser-url";
+  url.textContent = repoName ? `https://${repoName.replace(/\//g, ".").toLowerCase()}.github.io` : "https://example.github.io";
+  bar.appendChild(url);
+  wrapper.appendChild(bar);
+  wrapper.appendChild(iframe);
+  return wrapper;
+}
+var stylesInjected = false;
+function injectFrameStyles() {
+  if (stylesInjected) return;
+  stylesInjected = true;
+  const css = `
+/* \u2500\u2500 Diorama Frame Styles \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+.diorama-frame {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+  box-sizing: border-box;
+}
+.diorama-frame iframe {
+  display: block;
+  width: 100%;
+}
+
+/* \u2500\u2500 Standard \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.diorama-frame--standard {
+  border: 1px solid #d1d5db;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow:
+    0 1px 3px rgba(0,0,0,.06),
+    0 4px 12px rgba(0,0,0,.04);
+}
+
+/* \u2500\u2500 Polaroid \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.diorama-frame--polaroid {
+  background: #fff;
+  padding: 12px 12px 0 12px;
+  border-radius: 2px;
+  box-shadow:
+    0 2px 8px rgba(0,0,0,.10),
+    0 8px 30px rgba(0,0,0,.08);
+  transform: rotate(-1.2deg);
+}
+.diorama-frame--polaroid iframe {
+  border-radius: 0;
+}
+.diorama-polaroid-caption {
+  padding: 16px 4px 20px;
+  text-align: center;
+  font-family: 'Caveat', 'Segoe Print', 'Comic Sans MS', cursive;
+  font-size: 1.05rem;
+  color: #4b5563;
+  letter-spacing: .3px;
+  min-height: 24px;
+}
+
+/* \u2500\u2500 Museum \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.diorama-frame--museum {
+  --gold-light: #e8c96e;
+  --gold-mid: #c9a23a;
+  --gold-dark: #9e7a22;
+  --gold-shadow: #7a5c18;
+
+  padding: 18px;
+  background:
+    linear-gradient(145deg, var(--gold-light) 0%, var(--gold-mid) 30%, var(--gold-dark) 70%, var(--gold-shadow) 100%);
+  border-radius: 3px;
+  box-shadow:
+    inset 0 2px 4px rgba(255,255,255,.35),
+    inset 0 -2px 4px rgba(0,0,0,.25),
+    0 4px 20px rgba(0,0,0,.25),
+    0 8px 40px rgba(0,0,0,.15);
+  border: 2px solid var(--gold-dark);
+}
+.diorama-frame--museum::before {
+  content: '';
+  position: absolute;
+  inset: 6px;
+  border: 1px solid rgba(255,255,255,.2);
+  border-radius: 2px;
+  pointer-events: none;
+}
+.diorama-frame--museum::after {
+  content: '';
+  position: absolute;
+  inset: 10px;
+  border: 1px solid rgba(0,0,0,.15);
+  border-radius: 1px;
+  pointer-events: none;
+}
+.diorama-museum-mat {
+  background: #f5f0e8;
+  padding: 10px;
+  box-shadow: inset 0 1px 4px rgba(0,0,0,.1);
+}
+.diorama-museum-mat iframe {
+  border-radius: 0;
+}
+
+/* \u2500\u2500 Terminal \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.diorama-frame--terminal {
+  background: #1e1e2e;
+  border-radius: 10px;
+  overflow: hidden;
+  box-shadow:
+    0 4px 20px rgba(0,0,0,.3),
+    0 0 0 1px rgba(255,255,255,.06);
+}
+.diorama-terminal-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 14px;
+  background: linear-gradient(180deg, #2a2a3d, #232336);
+  border-bottom: 1px solid rgba(255,255,255,.06);
+  user-select: none;
+}
+.diorama-terminal-dots {
+  display: flex;
+  gap: 6px;
+}
+.diorama-terminal-dots i {
+  display: block;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+}
+.diorama-terminal-dots i:nth-child(1) { background: #ff5f56; }
+.diorama-terminal-dots i:nth-child(2) { background: #ffbd2e; }
+.diorama-terminal-dots i:nth-child(3) { background: #27c93f; }
+.diorama-terminal-title {
+  flex: 1;
+  text-align: center;
+  font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;
+  font-size: .75rem;
+  color: rgba(255,255,255,.45);
+  padding-right: 52px; /* offset for dots so title is visually centered */
+}
+
+/* \u2500\u2500 Postcard \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.diorama-frame--postcard {
+  background: #fdf8f0;
+  padding: 14px;
+  border-radius: 3px;
+  box-shadow:
+    0 2px 6px rgba(0,0,0,.08),
+    0 6px 24px rgba(0,0,0,.06);
+  border: 1px dashed #d4c5a9;
+  transform: rotate(0.6deg);
+}
+.diorama-frame--postcard iframe {
+  border-radius: 2px;
+}
+.diorama-postcard-stamp {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 40px;
+  height: 48px;
+  background: #fff;
+  border: 2px dashed #c9b894;
+  border-radius: 2px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform: rotate(3deg);
+  pointer-events: none;
+}
+.diorama-postcard-stamp-text {
+  font-size: 22px;
+  line-height: 1;
+}
+.diorama-postcard-mark {
+  position: absolute;
+  top: 18px;
+  right: 52px;
+  font-family: ui-monospace, 'Courier New', monospace;
+  font-size: .55rem;
+  font-weight: 700;
+  letter-spacing: .1em;
+  text-transform: uppercase;
+  color: rgba(180,80,60,.35);
+  border: 2px solid rgba(180,80,60,.25);
+  border-radius: 50%;
+  padding: 6px 8px;
+  transform: rotate(-12deg);
+  pointer-events: none;
+  white-space: nowrap;
+  max-width: 120px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* \u2500\u2500 Blueprint \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.diorama-frame--blueprint {
+  background: #1a3a5c;
+  padding: 16px;
+  border-radius: 2px;
+  box-shadow: 0 2px 12px rgba(0,0,0,.2);
+  background-image:
+    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
+  background-size: 20px 20px;
+}
+.diorama-frame--blueprint::before {
+  content: '';
+  position: absolute;
+  inset: 8px;
+  border: 1px solid rgba(255,255,255,.12);
+  pointer-events: none;
+}
+.diorama-frame--blueprint iframe {
+  border: 1px solid rgba(255,255,255,.15);
+}
+.diorama-blueprint-label {
+  margin-top: 8px;
+  font-family: ui-monospace, 'Courier New', monospace;
+  font-size: .65rem;
+  font-weight: 600;
+  letter-spacing: .15em;
+  text-transform: uppercase;
+  color: rgba(255,255,255,.35);
+  text-align: right;
+  padding-right: 4px;
+}
+
+/* \u2500\u2500 Browser \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.diorama-frame--browser {
+  background: #f0ebe6;
+  border-radius: 10px;
+  overflow: hidden;
+  box-shadow:
+    0 2px 8px rgba(0,0,0,.08),
+    0 8px 30px rgba(0,0,0,.06);
+  border: 1px solid #d5ccc3;
+}
+.diorama-browser-bar {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 12px;
+  background: linear-gradient(180deg, #f5f0eb, #ece7e1);
+  border-bottom: 1px solid #d5ccc3;
+  user-select: none;
+}
+.diorama-browser-dots {
+  display: flex;
+  gap: 6px;
+}
+.diorama-browser-dots i {
+  display: block;
+  width: 11px;
+  height: 11px;
+  border-radius: 50%;
+}
+.diorama-browser-dots i:nth-child(1) { background: #ed6a5e; }
+.diorama-browser-dots i:nth-child(2) { background: #f4bf4f; }
+.diorama-browser-dots i:nth-child(3) { background: #61c554; }
+.diorama-browser-url {
+  flex: 1;
+  font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Consolas, monospace;
+  font-size: .72rem;
+  color: #7a7067;
+  background: #fff;
+  border: 1px solid #d5ccc3;
+  border-radius: 5px;
+  padding: 4px 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+`;
+  const styleEl = document.createElement("style");
+  styleEl.setAttribute("data-diorama-frames", "");
+  styleEl.textContent = css;
+  document.head.appendChild(styleEl);
+}
+function escapeHTML(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+var expandStylesInjected = false;
+function injectExpandStyles() {
+  if (expandStylesInjected) return;
+  expandStylesInjected = true;
+  const css = `
+/* \u2500\u2500 Diorama Expand Styles \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+
+.diorama-expandable {
+  position: relative;
+}
+
+.diorama-expand-btn {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  width: 32px;
+  height: 32px;
+  border-radius: 6px;
+  background: rgba(0, 0, 0, 0.55);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  cursor: zoom-in;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity 0.15s ease, background 0.15s ease;
+  z-index: 10;
+  color: #fff;
+  padding: 0;
+  line-height: 1;
+}
+.diorama-expandable:hover .diorama-expand-btn,
+.diorama-expand-btn:focus-visible {
+  opacity: 1;
+}
+.diorama-expand-btn:hover {
+  background: rgba(0, 0, 0, 0.75);
+}
+
+.diorama-expand-backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 9998;
+  background: rgba(0, 0, 0, 0.45);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  cursor: zoom-out;
+  animation: diorama-fade-in 0.2s ease;
+}
+
+@keyframes diorama-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.diorama-expanded {
+  position: fixed !important;
+  top: 3vh !important;
+  left: 3vw !important;
+  width: 94vw !important;
+  height: 94vh !important;
+  z-index: 9999 !important;
+  display: flex !important;
+  flex-direction: column !important;
+  animation: diorama-expand-in 0.25s ease;
+}
+
+@keyframes diorama-expand-in {
+  from { opacity: 0.85; transform: scale(0.97); }
+  to { opacity: 1; transform: scale(1); }
+}
+
+.diorama-expanded .diorama-expand-btn {
+  display: none;
+}
+
+.diorama-expanded > .diorama-frame {
+  flex: 1 1 0 !important;
+  width: 100% !important;
+  display: flex !important;
+  flex-direction: column !important;
+  max-height: 100% !important;
+}
+
+.diorama-expanded > iframe,
+.diorama-expanded .diorama-frame iframe {
+  flex: 1 1 0 !important;
+  height: auto !important;
+  min-height: 0 !important;
+}
+
+/* \u2500\u2500 Slim down frames when expanded (keep identity, reduce bulk) */
+
+.diorama-expanded > .diorama-frame {
+  overflow: hidden !important;
+}
+
+/* Museum: thin gold border instead of chunky gilded frame */
+.diorama-expanded > .diorama-frame--museum {
+  padding: 5px !important;
+  border-radius: 6px !important;
+  box-shadow:
+    inset 0 1px 2px rgba(255,255,255,.25),
+    0 4px 24px rgba(0,0,0,.18) !important;
+}
+.diorama-expanded > .diorama-frame--museum::before {
+  inset: 2px !important;
+}
+.diorama-expanded > .diorama-frame--museum::after {
+  display: none !important;
+}
+.diorama-expanded .diorama-museum-mat {
+  padding: 3px !important;
+  flex: 1 1 0;
+  display: flex;
+  flex-direction: column;
+}
+.diorama-expanded .diorama-museum-mat iframe {
+  flex: 1 1 0 !important;
+}
+
+/* Polaroid: slim white border, compact caption */
+.diorama-expanded > .diorama-frame--polaroid {
+  padding: 6px 6px 0 6px !important;
+  border-radius: 6px !important;
+  box-shadow: 0 4px 24px rgba(0,0,0,.14) !important;
+}
+.diorama-expanded .diorama-polaroid-caption {
+  padding: 6px 10px !important;
+  font-size: .8rem !important;
+  min-height: auto !important;
+}
+
+/* Standard: just tighten padding */
+.diorama-expanded > .diorama-frame--standard {
+  padding: 5px !important;
+  border-radius: 6px !important;
+}
+
+/* Postcard: slim border, shrink stamp + postmark */
+.diorama-expanded > .diorama-frame--postcard {
+  padding: 5px !important;
+  border-radius: 6px !important;
+  box-shadow: 0 4px 24px rgba(0,0,0,.14) !important;
+}
+.diorama-expanded .diorama-postcard-stamp {
+  width: 28px !important;
+  height: 34px !important;
+  top: -2px !important;
+  right: 2px !important;
+}
+.diorama-expanded .diorama-postcard-mark {
+  font-size: .45rem !important;
+  padding: 4px 5px !important;
+  top: 8px !important;
+  right: 36px !important;
+}
+
+/* Blueprint: slim border, shrink label */
+.diorama-expanded > .diorama-frame--blueprint {
+  padding: 5px !important;
+  border-radius: 6px !important;
+  box-shadow: 0 4px 24px rgba(0,0,0,.18) !important;
+}
+.diorama-expanded > .diorama-frame--blueprint::before {
+  inset: 2px !important;
+}
+.diorama-expanded .diorama-blueprint-label {
+  margin-top: 4px !important;
+  font-size: .55rem !important;
+}
+
+/* Terminal / Browser: already slim \u2014 just round corners */
+.diorama-expanded > .diorama-frame--terminal,
+.diorama-expanded > .diorama-frame--browser {
+  border-radius: 10px !important;
+  box-shadow: 0 4px 24px rgba(0,0,0,.2) !important;
+}
+`;
+  const styleEl = document.createElement("style");
+  styleEl.setAttribute("data-diorama-expand", "");
+  styleEl.textContent = css;
+  document.head.appendChild(styleEl);
+}
+
+// src/transform/rewriter.ts
+var esmShProvider = {
+  buildURL(name, version, subpath) {
+    const ver = version ? `@${version}` : "";
+    const sub = subpath ? `/${subpath}` : "";
+    return `https://esm.sh/${name}${ver}${sub}`;
+  }
+};
+var skypackProvider = {
+  buildURL(name, version, subpath) {
+    const ver = version ? `@${version}` : "";
+    const sub = subpath ? `/${subpath}` : "";
+    return `https://cdn.skypack.dev/${name}${ver}${sub}`;
+  }
+};
+var unpkgProvider = {
+  buildURL(name, version, subpath) {
+    const ver = version ? `@${version}` : "";
+    const sub = subpath ? `/${subpath}` : "";
+    return `https://unpkg.com/${name}${ver}${sub}?module`;
+  }
+};
+function getCDNProvider(name) {
+  switch (name) {
+    case "skypack":
+      return skypackProvider;
+    case "unpkg":
+      return unpkgProvider;
+    case "esm.sh":
+    default:
+      return esmShProvider;
+  }
+}
+function rewriteImports(source, options = {}) {
+  const {
+    dependencies = {},
+    cdnProvider = "esm.sh",
+    framework = "none",
+    reactVersion,
+    isVite = false
+  } = options;
+  const provider = getCDNProvider(cdnProvider);
+  function rewriteSpecifier(raw) {
+    if (raw.startsWith(".") || raw.startsWith("/") || /^https?:\/\//.test(raw)) {
+      return raw;
+    }
+    const { packageName, subpath } = parseSpecifier(raw);
+    if (NODE_BUILTINS.has(packageName) || NODE_BUILTINS.has(packageName.replace("node:", ""))) {
+      throw new NodeBuiltinError(packageName);
+    }
+    const version = dependencies[packageName];
+    let url = provider.buildURL(packageName, version, subpath);
+    if (cdnProvider === "esm.sh" && reactVersion && framework === "react") {
+      if (packageName !== "react" && packageName !== "react-dom") {
+        const sep = url.includes("?") ? "&" : "?";
+        url += `${sep}deps=react@${reactVersion},react-dom@${reactVersion}`;
+      }
+    }
+    return url;
+  }
+  let result = source;
+  result = result.replace(
+    /(import\s+(?:[\s\S]*?)\s+from\s*['"])([^'"]+)(['"])/g,
+    (_match, pre, specifier, post) => {
+      return `${pre}${rewriteSpecifier(specifier)}${post}`;
+    }
+  );
+  result = result.replace(
+    /(?<!\bfrom\s*)(import\s*['"])([^'"]+)(['"])/g,
+    (_m, pre, specifier, post) => {
+      return `${pre}${rewriteSpecifier(specifier)}${post}`;
+    }
+  );
+  result = result.replace(
+    /(import\s*\(\s*['"])([^'"]+)(['"]\s*\))/g,
+    (_match, pre, specifier, post) => {
+      return `${pre}${rewriteSpecifier(specifier)}${post}`;
+    }
+  );
+  result = result.replace(
+    /(export\s+(?:\{[^}]*\}|\*)\s+from\s*['"])([^'"]+)(['"])/g,
+    (_match, pre, specifier, post) => {
+      return `${pre}${rewriteSpecifier(specifier)}${post}`;
+    }
+  );
+  if (isVite) {
+    result = result.replace(/\bimport\.meta\.env\.MODE\b/g, '"production"');
+    result = result.replace(/\bimport\.meta\.env\.BASE_URL\b/g, '"/"');
+    result = result.replace(/\bimport\.meta\.env\.PROD\b/g, "true");
+    result = result.replace(/\bimport\.meta\.env\.DEV\b/g, "false");
+    result = result.replace(/\bimport\.meta\.env\.SSR\b/g, "false");
+    result = result.replace(/\bimport\.meta\.env\.VITE_\w+\b/g, '""');
+  }
+  return result;
+}
+function parseSpecifier(raw) {
+  if (raw.startsWith("@")) {
+    const parts = raw.split("/");
+    const packageName = `${parts[0]}/${parts[1]}`;
+    const subpath = parts.length > 2 ? parts.slice(2).join("/") : void 0;
+    return { packageName, subpath };
+  }
+  const slashIndex = raw.indexOf("/");
+  if (slashIndex === -1) {
+    return { packageName: raw };
+  }
+  return {
+    packageName: raw.slice(0, slashIndex),
+    subpath: raw.slice(slashIndex + 1)
+  };
+}
+
+// src/transform/transpiler.ts
+var esbuildModule = null;
+var esbuildReady = null;
+var ESBUILD_CDN = "https://esm.sh/esbuild-wasm@0.24.0";
+async function ensureEsbuild(wasmURL) {
+  if (!esbuildReady) {
+    esbuildReady = (async () => {
+      try {
+        const mod = await import(
+          /* @vite-ignore */
+          ESBUILD_CDN
+        );
+        esbuildModule = mod.default ?? mod;
+        const resolvedURL = wasmURL && wasmURL !== "auto" ? wasmURL : `${ESBUILD_CDN}/esbuild.wasm`;
+        await esbuildModule.initialize({ wasmURL: resolvedURL });
+      } catch (err) {
+        esbuildReady = null;
+        esbuildModule = null;
+        throw new TranspilerLoadError(
+          err instanceof Error ? err.message : "Failed to load esbuild-wasm."
+        );
+      }
+    })();
+  }
+  return esbuildReady;
+}
+async function transpileFile(options) {
+  const { filePath, source, framework = "none", esbuildWasmURL } = options;
+  await ensureEsbuild(esbuildWasmURL);
+  const loader = loaderFor(filePath);
+  const jsxConfig = jsxConfigFor(framework, loader);
+  try {
+    const result = await esbuildModule.transform(source, {
+      loader,
+      ...jsxConfig,
+      target: "es2022",
+      format: "esm",
+      charset: "utf8"
+    });
+    return { code: result.code };
+  } catch (err) {
+    const msg = err instanceof Error ? err.message : String(err);
+    const lineMatch = msg.match(/:(\d+):(\d+):/);
+    throw new TranspileError(
+      msg,
+      filePath,
+      lineMatch ? parseInt(lineMatch[1], 10) : void 0,
+      lineMatch ? parseInt(lineMatch[2], 10) : void 0
+    );
+  }
+}
+async function transpileAll(files, framework = "none", esbuildWasmURL) {
+  const result = new Map(files);
+  const toTranspile = [];
+  for (const [path, content] of files) {
+    if (needsTranspilation(path)) {
+      toTranspile.push([path, content]);
+    }
+  }
+  if (toTranspile.length === 0) return result;
+  await ensureEsbuild(esbuildWasmURL);
+  const jobs = toTranspile.map(async ([path, content]) => {
+    const transpiled = await transpileFile({
+      filePath: path,
+      source: content,
+      framework,
+      esbuildWasmURL
+    });
+    return [path, transpiled.code];
+  });
+  const results = await Promise.all(jobs);
+  for (const [path, code] of results) {
+    result.set(path, code);
+  }
+  return result;
+}
+function loaderFor(filePath) {
+  if (filePath.endsWith(".tsx")) return "tsx";
+  if (filePath.endsWith(".ts")) return "ts";
+  if (filePath.endsWith(".jsx")) return "jsx";
+  return "js";
+}
+function jsxConfigFor(framework, loader) {
+  if (loader !== "tsx" && loader !== "jsx") {
+    return {};
+  }
+  switch (framework) {
+    case "react":
+      return { jsx: "automatic", jsxImportSource: "react" };
+    case "preact":
+      return { jsx: "automatic", jsxImportSource: "preact" };
+    case "solid":
+      return { jsx: "automatic", jsxImportSource: "react" };
+    default:
+      return { jsx: "automatic", jsxImportSource: "react" };
+  }
+}
+function needsTranspilation(path) {
+  return /\.(tsx?|jsx)$/.test(path);
+}
+function processEnvShim() {
+  return `if(typeof globalThis.process==='undefined'){globalThis.process={env:{NODE_ENV:'production'}};}`;
+}
+
+// src/transform/assembler.ts
+var SMALL_ASSET_LIMIT = 1e5;
+var INLINEABLE_EXTENSIONS = /* @__PURE__ */ new Set([
+  ".png",
+  ".jpg",
+  ".jpeg",
+  ".gif",
+  ".svg",
+  ".ico",
+  ".webp",
+  ".woff",
+  ".woff2",
+  ".ttf",
+  ".eot",
+  ".otf"
+]);
+var IMPORT_MAP_PREFIX = "__diorama__/";
+var ASSET_IMPORT_EXTENSIONS = {
+  ".svg": "image/svg+xml",
+  ".png": "image/png",
+  ".jpg": "image/jpeg",
+  ".jpeg": "image/jpeg",
+  ".gif": "image/gif",
+  ".webp": "image/webp",
+  ".ico": "image/x-icon",
+  ".woff": "font/woff",
+  ".woff2": "font/woff2",
+  ".ttf": "font/ttf",
+  ".eot": "application/vnd.ms-fontobject",
+  ".otf": "font/otf"
+};
+function assembleHTML(options) {
+  const { project, config, transformedFiles } = options;
+  const files = transformedFiles ?? project.files;
+  switch (config.type) {
+    case "static":
+      return assembleStatic(files, project, config);
+    case "static-esm":
+    case "jsx":
+    case "typescript":
+    case "jsx-typescript":
+    case "vite":
+      return assembleESM(files, project, config);
+    default:
+      throw new AssemblyError(`Unsupported project type: ${config.type}`);
+  }
+}
+function assembleStatic(files, project, config) {
+  let html = files.get(config.entryPoint);
+  if (!html) {
+    throw new AssemblyError(
+      `Entry point "${config.entryPoint}" not found in the project files.`
+    );
+  }
+  html = inlineLocalCSS(html, files, config.entryPoint);
+  html = inlineLocalJS(html, files, config.entryPoint);
+  html = inlineAssets(html, project, config.entryPoint);
+  return { html, usesESM: false };
+}
+function assembleESM(files, project, config) {
+  const isGenerated = config.entryPoint === "__generated__/index.html";
+  rewriteAssetImports(files, project);
+  const cssFromJS = extractCSSImports(files);
+  if (config.isVite) {
+    injectImportMetaEnv(files);
+  }
+  const importMap = buildImportMap(files);
+  let html;
+  if (isGenerated) {
+    html = generateHTMLShell(files, config);
+  } else {
+    html = files.get(config.entryPoint) ?? "";
+    if (!html) {
+      throw new AssemblyError(
+        `Entry point "${config.entryPoint}" not found in the project files.`
+      );
+    }
+    html = inlineLocalCSS(html, files, config.entryPoint);
+    html = rewriteScriptSrcsToImportMap(html, config.entryPoint);
+    html = inlineAssets(html, project, config.entryPoint);
+  }
+  if (cssFromJS) {
+    html = injectIntoHead(html, `<style>
+${cssFromJS}
+</style>`);
+  }
+  if (Object.keys(importMap).length > 0) {
+    const importMapJSON = JSON.stringify({ imports: importMap }, null, 2);
+    html = injectIntoHead(
+      html,
+      `<script type="importmap">
+${importMapJSON}
+</script>`
+    );
+  }
+  if (config.framework !== "none" || config.hasTypeScript || config.hasJSX) {
+    html = injectIntoHead(
+      html,
+      `<script>${processEnvShim()}</script>`
+    );
+  }
+  if (config.isVite) {
+    if (config.framework === "none" && !config.hasTypeScript && !config.hasJSX) {
+      html = injectIntoHead(
+        html,
+        `<script>${processEnvShim()}</script>`
+      );
+    }
+  }
+  return { html, usesESM: true };
+}
+function generateHTMLShell(files, config) {
+  const jsEntry = config.jsEntryPoint;
+  let mountScript = "";
+  if (config.framework === "react" && jsEntry) {
+    mountScript = `
+import { createRoot } from 'react-dom/client';
+import App from '${IMPORT_MAP_PREFIX}${jsEntry}';
+const root = createRoot(document.getElementById('root'));
+root.render(typeof App === 'function' ? App() : App);`;
+  } else if (config.framework === "preact" && jsEntry) {
+    mountScript = `
+import { render } from 'preact';
+import App from '${IMPORT_MAP_PREFIX}${jsEntry}';
+render(typeof App === 'function' ? App() : App, document.getElementById('root'));`;
+  } else if (jsEntry) {
+    mountScript = `import '${IMPORT_MAP_PREFIX}${jsEntry}';`;
+  }
+  const cssFiles = [];
+  for (const [path, content] of files) {
+    if (path.endsWith(".css") && !path.includes("module.css")) {
+      cssFiles.push(content);
+    }
+  }
+  return `<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <style>* { margin: 0; box-sizing: border-box; }</style>
+${cssFiles.map((css) => `  <style>
+${css}
+  </style>`).join("\n")}
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module">${mountScript}
+  </script>
+</body>
+</html>`;
+}
+function buildImportMap(files, _config) {
+  const jsFiles = /* @__PURE__ */ new Map();
+  for (const [path, content] of files) {
+    if (/\.(js|ts|jsx|tsx|mjs)$/.test(path)) {
+      jsFiles.set(path, content);
+    }
+  }
+  const map = {};
+  for (const [path, content] of jsFiles) {
+    const dir = directoryOf(path);
+    const rewritten = rewriteRelativeImportsToBareSpecifiers(content, dir, jsFiles);
+    const blobURL = createBlobURL(rewritten, "application/javascript");
+    map[`${IMPORT_MAP_PREFIX}${path}`] = blobURL;
+  }
+  return map;
+}
+function rewriteRelativeImportsToBareSpecifiers(source, dir, allFiles) {
+  return source.replace(
+    /((?:import|export)\s+(?:[\s\S]*?\s+from\s*|)['"])(\.[^'"]+)(['"])/g,
+    (_match, pre, specifier, post) => {
+      const resolved = dir ? resolvePath(dir, specifier) : specifier.replace(/^\.\//, "");
+      if (allFiles.has(resolved)) {
+        return `${pre}${IMPORT_MAP_PREFIX}${resolved}${post}`;
+      }
+      const withoutExt = resolved.replace(/\.[^.]+$/, "");
+      for (const ext of [".js", ".ts", ".jsx", ".tsx", ".mjs"]) {
+        if (allFiles.has(withoutExt + ext)) {
+          return `${pre}${IMPORT_MAP_PREFIX}${withoutExt + ext}${post}`;
+        }
+      }
+      return _match;
+    }
+  );
+}
+function createBlobURL(content, mime) {
+  return `data:${mime};base64,${btoa(unescape(encodeURIComponent(content)))}`;
+}
+function inlineLocalCSS(html, files, htmlPath) {
+  const dir = directoryOf(htmlPath);
+  return html.replace(
+    /<link\s+[^>]*(?:rel=["']stylesheet["'][^>]*href=["']([^"']+)["']|href=["']([^"']+)["'][^>]*rel=["']stylesheet["'])[^>]*\/?>/gi,
+    (match, href1, href2) => {
+      const href = href1 ?? href2;
+      if (!href) return match;
+      if (/^https?:\/\//.test(href)) return match;
+      let resolved;
+      if (href.startsWith("/")) {
+        resolved = href.slice(1);
+      } else {
+        resolved = resolvePath(dir, href);
+      }
+      const css = files.get(resolved);
+      if (css) {
+        return `<style>
+${css}
+</style>`;
+      }
+      return match;
+    }
+  );
+}
+function inlineLocalJS(html, files, htmlPath) {
+  const dir = directoryOf(htmlPath);
+  return html.replace(
+    /<script\s+[^>]*src=["']([^"']+)["'][^>]*><\/script>/gi,
+    (match, src) => {
+      if (/^https?:\/\//.test(src)) return match;
+      let resolved;
+      if (src.startsWith("/")) {
+        resolved = src.slice(1);
+      } else {
+        resolved = resolvePath(dir, src);
+      }
+      const js = files.get(resolved);
+      if (js) {
+        const typeMatch = match.match(/type=["']([^"']+)["']/);
+        const typeAttr = typeMatch ? ` type="${typeMatch[1]}"` : "";
+        return `<script${typeAttr}>
+${js}
+</script>`;
+      }
+      return match;
+    }
+  );
+}
+function rewriteScriptSrcsToImportMap(html, htmlPath) {
+  const dir = directoryOf(htmlPath);
+  return html.replace(
+    /<script\s+[^>]*src=["']([^"']+)["'][^>]*><\/script>/gi,
+    (match, src) => {
+      if (/^https?:\/\//.test(src)) return match;
+      let resolved;
+      if (src.startsWith("/")) {
+        resolved = src.slice(1);
+      } else {
+        resolved = resolvePath(dir, src);
+      }
+      return `<script type="module">import '${IMPORT_MAP_PREFIX}${resolved}';</script>`;
+    }
+  );
+}
+function inlineAssets(html, project, htmlPath) {
+  const dir = directoryOf(htmlPath);
+  return html.replace(
+    /(src|href)=["']([^"']+)["']/gi,
+    (match, attr, ref2) => {
+      if (/^(https?:\/\/|data:|blob:|#)/.test(ref2)) return match;
+      let resolved;
+      if (ref2.startsWith("/")) {
+        resolved = ref2.slice(1);
+      } else {
+        resolved = resolvePath(dir, ref2);
+      }
+      const ext = extensionOf2(resolved);
+      if (!INLINEABLE_EXTENSIONS.has(ext)) return match;
+      const blob = project.binaryFiles.get(resolved);
+      if (blob && blob.size <= SMALL_ASSET_LIMIT) {
+        if (ext === ".svg") {
+          const svgText = project.files.get(resolved);
+          if (svgText) {
+            const encoded = `data:image/svg+xml;base64,${btoa(svgText)}`;
+            return `${attr}="${encoded}"`;
+          }
+        }
+        return match;
+      }
+      if (ext === ".svg") {
+        const svgText = project.files.get(resolved);
+        if (svgText) {
+          const encoded = `data:image/svg+xml;base64,${btoa(unescape(encodeURIComponent(svgText)))}`;
+          return `${attr}="${encoded}"`;
+        }
+      }
+      return match;
+    }
+  );
+}
+function rewriteAssetImports(files, project) {
+  const assetImportRe = /import\s+(\w+)\s+from\s+['"]([^'"]+)['"]\s*;?/g;
+  for (const [filePath, content] of files) {
+    if (!/\.(js|ts|jsx|tsx|mjs)$/.test(filePath)) continue;
+    let modified = content;
+    let didModify = false;
+    let match;
+    assetImportRe.lastIndex = 0;
+    while ((match = assetImportRe.exec(content)) !== null) {
+      const binding = match[1];
+      const specifier = match[2];
+      const ext = extensionOf2(specifier);
+      if (!(ext in ASSET_IMPORT_EXTENSIONS)) continue;
+      let resolved;
+      if (specifier.startsWith("/")) {
+        resolved = specifier.slice(1);
+      } else {
+        resolved = resolvePath(directoryOf(filePath), specifier);
+      }
+      const mime = ASSET_IMPORT_EXTENSIONS[ext];
+      let dataURL = null;
+      const textContent = project.files.get(resolved);
+      if (textContent) {
+        dataURL = `data:${mime};base64,${btoa(unescape(encodeURIComponent(textContent)))}`;
+      }
+      if (!dataURL) {
+        const blob = project.binaryFiles.get(resolved);
+        if (blob) {
+          dataURL = `data:${mime};base64,`;
+        }
+      }
+      if (!dataURL) {
+        dataURL = `data:${mime};base64,`;
+      }
+      modified = modified.replace(match[0], `const ${binding} = "${dataURL}";`);
+      didModify = true;
+    }
+    if (didModify) {
+      files.set(filePath, modified);
+    }
+  }
+}
+function extractCSSImports(files) {
+  const cssChunks = [];
+  const cssImportRe = /import\s+['"]([^'"]+\.css)['"]\s*;?/g;
+  for (const [path, content] of files) {
+    if (!/\.(js|ts|jsx|tsx|mjs)$/.test(path)) continue;
+    let modified = content;
+    let match;
+    while ((match = cssImportRe.exec(content)) !== null) {
+      const cssPath = match[1];
+      const resolved = resolvePath(directoryOf(path), cssPath);
+      const css = files.get(resolved);
+      if (css) {
+        cssChunks.push(`/* ${resolved} */
+${css}`);
+      }
+      modified = modified.replace(match[0], "");
+    }
+    if (modified !== content) {
+      files.set(path, modified);
+    }
+  }
+  return cssChunks.join("\n\n");
+}
+function injectImportMetaEnv(files) {
+  const shim = `if(!import.meta.env){Object.defineProperty(import.meta,'env',{value:{MODE:'production',BASE_URL:'/',PROD:true,DEV:false,SSR:false}});}`;
+  for (const [path, content] of files) {
+    if (!/\.(js|ts|jsx|tsx|mjs)$/.test(path)) continue;
+    files.set(path, shim + "\n" + content);
+  }
+}
+function directoryOf(filePath) {
+  const lastSlash = filePath.lastIndexOf("/");
+  return lastSlash === -1 ? "" : filePath.slice(0, lastSlash);
+}
+function resolvePath(dir, relative) {
+  let cleaned = relative.replace(/^\.\//, "");
+  if (!dir) return cleaned;
+  const parts = dir.split("/");
+  const segments = cleaned.split("/");
+  for (const seg of segments) {
+    if (seg === "..") {
+      parts.pop();
+    } else if (seg !== ".") {
+      parts.push(seg);
+    }
+  }
+  return parts.join("/");
+}
+function extensionOf2(path) {
+  const dot = path.lastIndexOf(".");
+  return dot === -1 ? "" : path.slice(dot).toLowerCase();
+}
+function injectIntoHead(html, tag) {
+  if (html.includes("</head>")) {
+    return html.replace("</head>", `  ${tag}
+</head>`);
+  }
+  if (html.includes("<body")) {
+    return html.replace(/<body/, `${tag}
+<body`);
+  }
+  return `${tag}
+${html}`;
+}
+
+// src/index.ts
+var Diorama = class {
+  options;
+  cache;
+  constructor(options = {}) {
+    this.options = {
+      cache: options.cache ?? true,
+      cacheTTL: options.cacheTTL ?? 3600,
+      cacheStrategy: options.cacheStrategy ?? "normal",
+      cdnProvider: options.cdnProvider ?? "esm.sh",
+      githubToken: options.githubToken ?? "",
+      esbuildWasmURL: options.esbuildWasmURL ?? "auto",
+      maxConcurrentFetches: options.maxConcurrentFetches ?? 6,
+      timeout: options.timeout ?? 3e4
+    };
+    this.cache = new CacheManager({
+      enabled: this.options.cache,
+      ttl: this.options.cacheTTL,
+      strategy: this.options.cacheStrategy
+    });
+  }
+  // ─── Render ────────────────────────────────────────────────
+  /**
+   * Fetch, transform, and render a GitHub project inside a
+   * sandboxed iframe.
+   *
+   * @param container CSS selector or DOM element.
+   * @param repoURL   GitHub URL or `owner/repo` shorthand.
+   * @param options    Per-render options.
+   * @returns A handle for reloading or destroying the instance.
+   */
+  async render(container, repoURL, options = {}) {
+    const renderImpl = async () => {
+      const project = await this.fetchProject(repoURL, options);
+      const repoName2 = `${project.owner}/${project.repo}`;
+      const config = analyzeProject(
+        project,
+        options.projectType,
+        options.entryPoint
+      );
+      let files = project.files;
+      const needsTranspile = config.type === "jsx" || config.type === "typescript" || config.type === "jsx-typescript" || config.type === "vite" && (config.hasJSX || config.hasTypeScript);
+      if (needsTranspile) {
+        files = await transpileAll(
+          files,
+          config.framework,
+          this.options.esbuildWasmURL
+        );
+      }
+      if (config.type !== "static") {
+        const reactVersion = config.framework === "react" ? config.dependencies["react"] : void 0;
+        for (const [path, content] of files) {
+          if (/\.(js|ts|jsx|tsx|mjs)$/.test(path)) {
+            const rewritten = rewriteImports(content, {
+              dependencies: config.dependencies,
+              cdnProvider: this.options.cdnProvider,
+              framework: config.framework,
+              reactVersion,
+              isVite: config.isVite
+            });
+            files.set(path, rewritten);
+          }
+        }
+      }
+      const { html: html2, usesESM: usesESM2 } = assembleHTML({
+        project,
+        config,
+        transformedFiles: files
+      });
+      return { html: html2, usesESM: usesESM2, repoName: repoName2 };
+    };
+    let html;
+    let usesESM;
+    let repoName;
+    try {
+      const result = await withTimeout(
+        renderImpl(),
+        this.options.timeout
+      );
+      html = result.html;
+      usesESM = result.usesESM;
+      repoName = result.repoName;
+    } catch (err) {
+      const dioErr = err instanceof DioramaError ? err : new DioramaError("UNKNOWN", String(err));
+      options.onError?.(dioErr);
+      html = buildErrorHTML(dioErr.message);
+      usesESM = false;
+      repoName = repoURL;
+    }
+    const sandbox = createSandbox({
+      container,
+      html,
+      height: options.height,
+      sandboxFlags: options.sandbox,
+      loading: options.loading,
+      frame: options.frame,
+      expand: options.expand,
+      placeholder: options.placeholder,
+      repoName,
+      useBlobURL: usesESM,
+      onLoad: options.onLoad,
+      onError: options.onError
+    });
+    const instance = {
+      reload: async () => {
+        try {
+          const result = await renderImpl();
+          sandbox.update(result.html);
+          options.onLoad?.();
+        } catch (err) {
+          const dioErr = err instanceof DioramaError ? err : new DioramaError("UNKNOWN", String(err));
+          options.onError?.(dioErr);
+          sandbox.update(buildErrorHTML(dioErr.message));
+        }
+      },
+      destroy: () => {
+        sandbox.destroy();
+      }
+    };
+    return instance;
+  }
+  // ─── Utilities ─────────────────────────────────────────────
+  /**
+   * Pre-fetch a project (resolve + cache) without rendering.
+   */
+  async prefetch(repoURL, options = {}) {
+    await this.fetchProject(repoURL, options);
+  }
+  /**
+   * Clear cached data.
+   * @param repoSlug Optional `owner/repo` to clear a specific entry.
+   */
+  clearCache(repoSlug) {
+    this.cache.clear(repoSlug);
+  }
+  // ─── Internal ──────────────────────────────────────────────
+  async fetchProject(repoURL, options) {
+    const project = await resolveProject(repoURL, {
+      githubToken: this.options.githubToken || void 0,
+      maxConcurrentFetches: this.options.maxConcurrentFetches,
+      branch: options.branch,
+      subdirectory: options.subdirectory,
+      exclude: options.exclude
+    });
+    await this.cache.set(project);
+    return project;
+  }
+};
+function withTimeout(promise, ms) {
+  return new Promise((resolve, reject) => {
+    const timer = setTimeout(
+      () => reject(new DioramaError("TIMEOUT", `Render timed out after ${ms}ms`)),
+      ms
+    );
+    promise.then((val) => {
+      clearTimeout(timer);
+      resolve(val);
+    }).catch((err) => {
+      clearTimeout(timer);
+      reject(err);
+    });
+  });
+}
+
+// src/adapters/vue.ts
+var sharedInstance = null;
+function getOrCreateInstance(options) {
+  if (!sharedInstance) {
+    sharedInstance = new Diorama(options);
+  }
+  return sharedInstance;
+}
+var dioramaProps = {
+  repo: { type: String, required: true },
+  branch: { type: String, default: void 0 },
+  subdirectory: { type: String, default: void 0 },
+  loading: { type: String, default: "eager" },
+  placeholder: { type: String, default: void 0 },
+  height: { type: String, default: "500px" },
+  frame: { type: String, default: "none" },
+  expand: { type: Boolean, default: false },
+  options: { type: Object, default: void 0 }
+};
+var DioramaPreview = defineComponent({
+  name: "DioramaPreview",
+  props: dioramaProps,
+  emits: ["load", "error"],
+  setup(props, { emit }) {
+    const containerRef = ref(null);
+    let instance = null;
+    async function renderProject() {
+      const container = containerRef.value;
+      if (!container) return;
+      instance?.destroy();
+      instance = null;
+      const diorama = getOrCreateInstance(props.options);
+      try {
+        instance = await diorama.render(container, props.repo, {
+          branch: props.branch,
+          subdirectory: props.subdirectory,
+          loading: props.loading,
+          placeholder: props.placeholder,
+          height: props.height,
+          frame: props.frame,
+          expand: props.expand,
+          onLoad: () => emit("load"),
+          onError: (err) => emit("error", err)
+        });
+      } catch (err) {
+        emit("error", err);
+      }
+    }
+    onMounted(() => {
+      renderProject();
+    });
+    onUnmounted(() => {
+      instance?.destroy();
+      instance = null;
+    });
+    watch(
+      () => [props.repo, props.branch, props.subdirectory, props.loading, props.height, props.frame, props.expand],
+      () => {
+        renderProject();
+      }
+    );
+    return () => h("div", {
+      ref: containerRef,
+      style: { width: "100%", minHeight: props.height }
+    });
+  }
+});
+
+export { Diorama, DioramaPreview };
+//# sourceMappingURL=vue.js.map
+//# sourceMappingURL=vue.js.map