@aprovan/patchwork-compiler 0.1.2-dev.6bd527d → 0.1.2-dev.879ed82

package/dist/index.js

@@ -1,48 +1,6 @@
 // src/compiler.ts
 import * as esbuild from "esbuild-wasm";
 
-// src/vfs/project.ts
-function createProjectFromFiles(files, id = crypto.randomUUID()) {
-  const fileMap = /* @__PURE__ */ new Map();
-  for (const file of files) {
-    fileMap.set(file.path, file);
-  }
-  return { id, entry: resolveEntry(fileMap), files: fileMap };
-}
-function resolveEntry(files) {
-  const paths = Array.from(files.keys());
-  const mainFile = paths.find((p) => /\bmain\.(tsx?|jsx?)$/.test(p));
-  if (mainFile) return mainFile;
-  const indexFile = paths.find((p) => /\bindex\.(tsx?|jsx?)$/.test(p));
-  if (indexFile) return indexFile;
-  const firstTsx = paths.find((p) => /\.(tsx|jsx)$/.test(p));
-  if (firstTsx) return firstTsx;
-  return paths[0] || "main.tsx";
-}
-function detectMainFile(language) {
-  switch (language) {
-    case "tsx":
-    case "typescript":
-      return "main.tsx";
-    case "jsx":
-    case "javascript":
-      return "main.jsx";
-    case "ts":
-      return "main.ts";
-    case "js":
-      return "main.js";
-    default:
-      return "main.tsx";
-  }
-}
-function createSingleFileProject(content, entry = "main.tsx", id = "inline") {
-  return {
-    id,
-    entry,
-    files: /* @__PURE__ */ new Map([[entry, { path: entry, content }]])
-  };
-}
-
 // src/schemas.ts
 import { z } from "zod";
 var PlatformSchema = z.enum(["browser", "cli"]);
@@ -130,7 +88,7 @@ var DEFAULT_CLI_IMAGE_CONFIG = {
   }
 };
 
-// src/images/loader.ts
+// src/cdn-config.ts
 var DEFAULT_CDN_BASE = "https://esm.sh";
 var cdnBaseUrl = DEFAULT_CDN_BASE;
 function setCdnBaseUrl(url) {
@@ -139,7 +97,24 @@ function setCdnBaseUrl(url) {
 function getCdnBaseUrl() {
   return cdnBaseUrl;
 }
-function parseImageSpec(spec) {
+function toEsmShUrl(packageName, version2, subpath, deps) {
+  let url = `${cdnBaseUrl}/${packageName}`;
+  if (version2) {
+    url += `@${version2}`;
+  }
+  if (subpath) {
+    url += `/${subpath}`;
+  }
+  if (deps && Object.keys(deps).length > 0) {
+    const depsStr = Object.entries(deps).map(([name, ver]) => `${name}@${ver}`).join(",");
+    url += `?deps=${depsStr}`;
+  }
+  return url;
+}
+function isBareImport(path) {
+  return !(path.startsWith(".") || path.startsWith("/") || path.startsWith("http://") || path.startsWith("https://"));
+}
+function parsePackageSpec(spec) {
   if (spec.startsWith("@")) {
     const parts = spec.split("/");
     if (parts.length >= 2) {
@@ -164,14 +139,77 @@ function parseImageSpec(spec) {
   }
   return { name: spec };
 }
-async function fetchPackageJson(packageName, version) {
-  const versionSuffix = version ? `@${version}` : "";
-  const url = `${cdnBaseUrl}/${packageName}${versionSuffix}/package.json`;
+function parseImportPath(importPath) {
+  if (importPath.startsWith("@")) {
+    const parts2 = importPath.split("/");
+    if (parts2.length >= 2) {
+      const packageName2 = `${parts2[0]}/${parts2[1]}`;
+      const subpath2 = parts2.slice(2).join("/");
+      return { packageName: packageName2, subpath: subpath2 || void 0 };
+    }
+  }
+  const parts = importPath.split("/");
+  const packageName = parts[0];
+  const subpath = parts.slice(1).join("/");
+  return { packageName, subpath: subpath || void 0 };
+}
+function matchAlias(importPath, aliases) {
+  for (const [pattern, target] of Object.entries(aliases)) {
+    if (pattern.endsWith("/*")) {
+      const prefix = pattern.slice(0, -2);
+      if (importPath === prefix || importPath.startsWith(prefix + "/")) {
+        return target;
+      }
+    }
+    if (importPath === pattern) {
+      return target;
+    }
+  }
+  return null;
+}
+var COMMON_EXPORTS = {
+  react: [
+    "useState",
+    "useEffect",
+    "useCallback",
+    "useMemo",
+    "useRef",
+    "useContext",
+    "useReducer",
+    "useLayoutEffect",
+    "useId",
+    "createContext",
+    "createElement",
+    "cloneElement",
+    "createRef",
+    "forwardRef",
+    "lazy",
+    "memo",
+    "Fragment",
+    "Suspense",
+    "StrictMode",
+    "Component",
+    "PureComponent",
+    "Children",
+    "isValidElement"
+  ],
+  "react-dom": ["createPortal", "flushSync", "render", "hydrate", "unmountComponentAtNode"]
+};
+function getCommonExports(packageName) {
+  return COMMON_EXPORTS[packageName] ?? [];
+}
+
+// src/images/loader.ts
+function parseImageSpec(spec) {
+  return parsePackageSpec(spec);
+}
+async function fetchPackageJson(packageName, version2) {
+  const cdnBaseUrl2 = getCdnBaseUrl();
+  const versionSuffix = version2 ? `@${version2}` : "";
+  const url = `${cdnBaseUrl2}/${packageName}${versionSuffix}/package.json`;
   const response = await fetch(url);
   if (!response.ok) {
-    throw new Error(
-      `Failed to fetch package.json for ${packageName}: ${response.statusText}`
-    );
+    throw new Error(`Failed to fetch package.json for ${packageName}: ${response.statusText}`);
   }
   return response.json();
 }
@@ -226,21 +264,22 @@ async function loadLocalImage(name) {
   }
 }
 async function loadImage(spec) {
-  const { name, version } = parseImageSpec(spec);
+  const { name, version: version2 } = parseImageSpec(spec);
   const localImage = await loadLocalImage(name);
   if (localImage) {
     return localImage;
   }
-  const packageJson = await fetchPackageJson(name, version);
+  const packageJson = await fetchPackageJson(name, version2);
   const config = safeParseImageConfig(packageJson.patchwork) || DEFAULT_IMAGE_CONFIG;
   let setup;
   let mount;
   let moduleUrl;
   if (packageJson.main && typeof window !== "undefined") {
     try {
-      const versionSuffix = version ? `@${version}` : "";
+      const cdnBaseUrl2 = getCdnBaseUrl();
+      const versionSuffix = version2 ? `@${version2}` : "";
       const mainEntry = packageJson.main.startsWith("./") ? packageJson.main.slice(2) : packageJson.main;
-      const importUrl = `${cdnBaseUrl}/${name}${versionSuffix}/${mainEntry}`;
+      const importUrl = `${cdnBaseUrl2}/${name}${versionSuffix}/${mainEntry}`;
       moduleUrl = importUrl;
       const imageModule = await import(
         /* @vite-ignore */
@@ -271,443 +310,85 @@ async function loadImage(spec) {
 var ImageRegistry = class {
   images = /* @__PURE__ */ new Map();
   loading = /* @__PURE__ */ new Map();
-  /**
-   * Get a loaded image by spec
-   */
-  get(spec) {
-    const { name } = parseImageSpec(spec);
-    return this.images.get(name);
-  }
-  /**
-   * Check if an image is loaded
-   */
-  has(spec) {
-    const { name } = parseImageSpec(spec);
-    return this.images.has(name);
-  }
-  /**
-   * Load an image (or return cached)
-   */
-  async load(spec) {
-    const { name } = parseImageSpec(spec);
-    const cached = this.images.get(name);
-    if (cached) {
-      return cached;
-    }
-    const inProgress = this.loading.get(name);
-    if (inProgress) {
-      return inProgress;
-    }
-    const loadPromise = loadImage(spec).then((image) => {
-      this.images.set(name, image);
-      this.loading.delete(name);
-      return image;
-    });
-    this.loading.set(name, loadPromise);
-    return loadPromise;
-  }
-  /**
-   * Preload an image
-   */
-  async preload(spec) {
-    await this.load(spec);
-  }
-  /**
-   * Clear a specific image from cache
-   */
-  clear(spec) {
-    const { name } = parseImageSpec(spec);
-    this.images.delete(name);
-    this.loading.delete(name);
-  }
-  /**
-   * Clear all cached images
-   */
-  clearAll() {
-    this.images.clear();
-    this.loading.clear();
-  }
-  /**
-   * Get all loaded image names
-   */
-  getLoadedNames() {
-    return Array.from(this.images.keys());
-  }
-};
-var globalRegistry = null;
-function getImageRegistry() {
-  if (!globalRegistry) {
-    globalRegistry = new ImageRegistry();
-  }
-  return globalRegistry;
-}
-function createImageRegistry() {
-  return new ImageRegistry();
-}
-
-// src/transforms/cdn.ts
-var DEFAULT_CDN_BASE2 = "https://esm.sh";
-var cdnBaseUrl2 = DEFAULT_CDN_BASE2;
-function setCdnBaseUrl2(url) {
-  cdnBaseUrl2 = url;
-}
-var EXTERNAL_PACKAGES = /* @__PURE__ */ new Set(["react", "react-dom", "ink"]);
-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",
-  "timers",
-  "tls",
-  "tty",
-  "url",
-  "util",
-  "v8",
-  "vm",
-  "worker_threads",
-  "zlib"
-]);
-function toEsmShUrl(packageName, version, subpath, deps) {
-  let url = `${cdnBaseUrl2}/${packageName}`;
-  if (version) {
-    url += `@${version}`;
-  }
-  if (subpath) {
-    url += `/${subpath}`;
-  }
-  if (deps && Object.keys(deps).length > 0) {
-    const depsStr = Object.entries(deps).map(([name, ver]) => `${name}@${ver}`).join(",");
-    url += `?deps=${depsStr}`;
-  }
-  return url;
-}
-function isBareImport(path) {
-  if (path.startsWith(".") || path.startsWith("/") || path.startsWith("http://") || path.startsWith("https://")) {
-    return false;
-  }
-  return true;
-}
-function parseImportPath(importPath) {
-  if (importPath.startsWith("@")) {
-    const parts2 = importPath.split("/");
-    if (parts2.length >= 2) {
-      const packageName2 = `${parts2[0]}/${parts2[1]}`;
-      const subpath2 = parts2.slice(2).join("/");
-      return { packageName: packageName2, subpath: subpath2 || void 0 };
-    }
-  }
-  const parts = importPath.split("/");
-  const packageName = parts[0];
-  const subpath = parts.slice(1).join("/");
-  return { packageName, subpath: subpath || void 0 };
-}
-function matchAlias(importPath, aliases) {
-  for (const [pattern, target] of Object.entries(aliases)) {
-    if (pattern.endsWith("/*")) {
-      const prefix = pattern.slice(0, -2);
-      if (importPath === prefix || importPath.startsWith(prefix + "/")) {
-        return target;
-      }
-    }
-    if (importPath === pattern) {
-      return target;
-    }
-  }
-  return null;
-}
-function cdnTransformPlugin(options = {}) {
-  const {
-    packages = {},
-    external = [],
-    bundle = false,
-    globals = {},
-    deps = {},
-    aliases = {}
-  } = options;
-  const externalSet = /* @__PURE__ */ new Set([...EXTERNAL_PACKAGES, ...external]);
-  const globalsSet = new Set(Object.keys(globals));
-  return {
-    name: "cdn-transform",
-    setup(build2) {
-      build2.onResolve({ filter: /.*/ }, (args) => {
-        const aliasTarget = matchAlias(args.path, aliases);
-        if (aliasTarget) {
-          const { packageName, subpath } = parseImportPath(aliasTarget);
-          if (globalsSet.has(packageName)) {
-            return {
-              path: aliasTarget,
-              namespace: "global-inject"
-            };
-          }
-          const version = packages[packageName];
-          let url = toEsmShUrl(
-            packageName,
-            version,
-            subpath,
-            Object.keys(deps).length > 0 ? deps : void 0
-          );
-          if (bundle) {
-            url += url.includes("?") ? "&bundle" : "?bundle";
-          }
-          return {
-            path: url,
-            external: true
-          };
-        }
-        return null;
-      });
-      build2.onResolve({ filter: /.*/ }, (args) => {
-        if (!isBareImport(args.path)) {
-          return null;
-        }
-        const { packageName } = parseImportPath(args.path);
-        if (globalsSet.has(packageName)) {
-          return {
-            path: args.path,
-            namespace: "global-inject"
-          };
-        }
-        return null;
-      });
-      build2.onLoad({ filter: /.*/, namespace: "global-inject" }, (args) => {
-        const { packageName, subpath } = parseImportPath(args.path);
-        const globalName = globals[packageName];
-        if (!globalName) return null;
-        if (subpath) {
-          return {
-            contents: `export * from '${packageName}'; export { default } from '${packageName}';`,
-            loader: "js"
-          };
-        }
-        const contents = `
-const mod = window.${globalName};
-export default mod;
-// Re-export all properties as named exports
-const { ${getCommonExports(packageName).join(", ")} } = mod;
-export { ${getCommonExports(packageName).join(", ")} };
-`;
-        return {
-          contents,
-          loader: "js"
-        };
-      });
-      build2.onResolve({ filter: /.*/ }, (args) => {
-        if (!isBareImport(args.path)) {
-          return null;
-        }
-        if (NODE_BUILTINS.has(args.path)) {
-          return { external: true };
-        }
-        const { packageName, subpath } = parseImportPath(args.path);
-        if (globalsSet.has(packageName)) {
-          return null;
-        }
-        if (externalSet.has(packageName)) {
-          return { external: true };
-        }
-        const version = packages[packageName];
-        let url = toEsmShUrl(
-          packageName,
-          version,
-          subpath,
-          Object.keys(deps).length > 0 ? deps : void 0
-        );
-        if (bundle) {
-          url += url.includes("?") ? "&bundle" : "?bundle";
-        }
-        return {
-          path: url,
-          external: true
-        };
-      });
-    }
-  };
-}
-function getCommonExports(packageName) {
-  const exports = {
-    react: [
-      "useState",
-      "useEffect",
-      "useCallback",
-      "useMemo",
-      "useRef",
-      "useContext",
-      "useReducer",
-      "useLayoutEffect",
-      "useId",
-      "createContext",
-      "createElement",
-      "cloneElement",
-      "createRef",
-      "forwardRef",
-      "lazy",
-      "memo",
-      "Fragment",
-      "Suspense",
-      "StrictMode",
-      "Component",
-      "PureComponent",
-      "Children",
-      "isValidElement"
-    ],
-    "react-dom": [
-      "createPortal",
-      "flushSync",
-      "render",
-      "hydrate",
-      "unmountComponentAtNode"
-    ]
-  };
-  return exports[packageName] || [];
-}
-function generateImportMap(packages) {
-  const imports = {};
-  for (const [name, version] of Object.entries(packages)) {
-    imports[name] = toEsmShUrl(name, version);
-  }
-  return imports;
-}
-
-// src/transforms/vfs.ts
-function dirname(path) {
-  const idx = path.lastIndexOf("/");
-  return idx === -1 ? "." : path.slice(0, idx) || ".";
-}
-function normalizePath(path) {
-  const parts = [];
-  for (const segment of path.split("/")) {
-    if (segment === "..") parts.pop();
-    else if (segment && segment !== ".") parts.push(segment);
-  }
-  return parts.join("/");
-}
-function inferLoader(path, language) {
-  if (language) {
-    switch (language) {
-      case "typescript":
-      case "ts":
-        return "ts";
-      case "tsx":
-        return "tsx";
-      case "javascript":
-      case "js":
-        return "js";
-      case "jsx":
-        return "jsx";
-      case "json":
-        return "json";
-      case "css":
-        return "css";
-    }
-  }
-  const ext = path.split(".").pop();
-  switch (ext) {
-    case "ts":
-      return "ts";
-    case "tsx":
-      return "tsx";
-    case "js":
-      return "js";
-    case "jsx":
-      return "jsx";
-    case "json":
-      return "json";
-    case "css":
-      return "css";
-    default:
-      return "tsx";
+  /**
+   * Get a loaded image by spec
+   */
+  get(spec) {
+    const { name } = parseImageSpec(spec);
+    return this.images.get(name);
   }
-}
-function normalizeVFSPath(path) {
-  if (path.startsWith("@/")) {
-    return path.slice(2);
+  /**
+   * Check if an image is loaded
+   */
+  has(spec) {
+    const { name } = parseImageSpec(spec);
+    return this.images.has(name);
   }
-  return path;
-}
-function resolveRelativePath(importer, target) {
-  const importerDir = dirname(normalizeVFSPath(importer));
-  const combined = importerDir === "." ? target : `${importerDir}/${target}`;
-  return normalizePath(combined);
-}
-function matchAlias2(importPath, aliases) {
-  if (!aliases) return null;
-  for (const [pattern, target] of Object.entries(aliases)) {
-    if (pattern.endsWith("/*")) {
-      const prefix = pattern.slice(0, -2);
-      if (importPath === prefix || importPath.startsWith(prefix + "/")) {
-        return target;
-      }
+  /**
+   * Load an image (or return cached)
+   */
+  async load(spec) {
+    const { name } = parseImageSpec(spec);
+    const cached = this.images.get(name);
+    if (cached) {
+      return cached;
     }
-    if (importPath === pattern) {
-      return target;
+    const inProgress = this.loading.get(name);
+    if (inProgress) {
+      return inProgress;
     }
+    const loadPromise = loadImage(spec).then((image) => {
+      this.images.set(name, image);
+      this.loading.delete(name);
+      return image;
+    });
+    this.loading.set(name, loadPromise);
+    return loadPromise;
   }
-  return null;
-}
-function findFile(project, path) {
-  if (project.files.has(path)) return path;
-  const extensions = [".tsx", ".ts", ".jsx", ".js", ".json"];
-  for (const ext of extensions) {
-    if (project.files.has(path + ext)) return path + ext;
+  /**
+   * Preload an image
+   */
+  async preload(spec) {
+    await this.load(spec);
   }
-  for (const ext of extensions) {
-    const indexPath = `${path}/index${ext}`;
-    if (project.files.has(indexPath)) return indexPath;
+  /**
+   * Clear a specific image from cache
+   */
+  clear(spec) {
+    const { name } = parseImageSpec(spec);
+    this.images.delete(name);
+    this.loading.delete(name);
   }
-  return null;
+  /**
+   * Clear all cached images
+   */
+  clearAll() {
+    this.images.clear();
+    this.loading.clear();
+  }
+  /**
+   * Get all loaded image names
+   */
+  getLoadedNames() {
+    return Array.from(this.images.keys());
+  }
+};
+var globalRegistry = null;
+function getImageRegistry() {
+  if (!globalRegistry) {
+    globalRegistry = new ImageRegistry();
+  }
+  return globalRegistry;
 }
-function vfsPlugin(project, options = {}) {
-  return {
-    name: "patchwork-vfs",
-    setup(build2) {
-      build2.onResolve({ filter: /^@\// }, (args) => {
-        const aliased = matchAlias2(args.path, options.aliases);
-        if (aliased) return null;
-        return { path: args.path, namespace: "vfs" };
-      });
-      build2.onResolve({ filter: /^\./ }, (args) => {
-        if (args.namespace !== "vfs") return null;
-        const resolved = resolveRelativePath(args.importer, args.path);
-        return { path: resolved, namespace: "vfs" };
-      });
-      build2.onLoad({ filter: /.*/, namespace: "vfs" }, (args) => {
-        const normalPath = normalizeVFSPath(args.path);
-        const filePath = findFile(project, normalPath);
-        if (!filePath) {
-          throw new Error(`File not found in VFS: ${args.path}`);
-        }
-        const file = project.files.get(filePath);
-        return {
-          contents: file.content,
-          loader: inferLoader(filePath, file.language)
-        };
-      });
-    }
-  };
+function createImageRegistry() {
+  return new ImageRegistry();
 }
 
 // src/mount/bridge.ts
 function generateMessageId() {
   return `${Date.now()}-${Math.random().toString(36).slice(2, 11)}`;
 }
-function createHttpServiceProxy(proxyUrl) {
+function createHttpProxy(proxyUrl) {
   return {
     async call(namespace, procedure, args) {
       const url = `${proxyUrl}/${namespace}/${procedure}`;
@@ -851,7 +532,7 @@ var ParentBridge = class {
     this.pendingCalls.clear();
   }
 };
-function createIframeServiceProxy() {
+function createIframeProxy() {
   const pendingCalls = /* @__PURE__ */ new Map();
   if (typeof window !== "undefined") {
     window.addEventListener("message", (event) => {
@@ -983,9 +664,9 @@ function injectImportMap(globals, preloadUrls, deps) {
     if (preloadUrls[index]) {
       imports[pkgName] = preloadUrls[index];
     } else if (deps?.[pkgName]) {
-      imports[pkgName] = `https://esm.sh/${pkgName}@${deps[pkgName]}`;
+      imports[pkgName] = toEsmShUrl(pkgName, deps[pkgName]);
     } else {
-      imports[pkgName] = `https://esm.sh/${pkgName}`;
+      imports[pkgName] = toEsmShUrl(pkgName);
     }
   });
   if (imports["react-dom"]) {
@@ -1055,13 +736,11 @@ async function mountEmbedded(widget, options, image, proxy) {
   const deps = frameworkConfig.deps || {};
   injectImportMap(globalMapping, preloadUrls, deps);
   const preloadedModules = await Promise.all(
-    preloadUrls.map(
-      (url) => import(
-        /* webpackIgnore: true */
-        /* @vite-ignore */
-        url
-      )
-    )
+    preloadUrls.map((url) => import(
+      /* webpackIgnore: true */
+      /* @vite-ignore */
+      url
+    ))
   );
   const win = window;
   const globalNames = Object.values(globalMapping);
@@ -1105,48 +784,198 @@ async function mountEmbedded(widget, options, image, proxy) {
         if (typeof root.unmount === "function") {
           moduleCleanup = () => root.unmount();
         }
-      } else if (createElement && renderer?.kind === "render") {
-        renderer.render(createElement(Component, inputs), container);
-      } else {
-        const result = Component(inputs);
-        if (result instanceof HTMLElement) {
-          container.appendChild(result);
-        } else if (typeof result === "string") {
-          container.innerHTML = result;
+      } else if (createElement && renderer?.kind === "render") {
+        renderer.render(createElement(Component, inputs), container);
+      } else {
+        const result = Component(inputs);
+        if (result instanceof HTMLElement) {
+          container.appendChild(result);
+        } else if (typeof result === "string") {
+          container.innerHTML = result;
+        }
+      }
+    }
+  } finally {
+    URL.revokeObjectURL(scriptUrl);
+  }
+  const unmount = () => {
+    if (moduleCleanup) {
+      moduleCleanup();
+    }
+    removeNamespaceGlobals(window, namespaceNames);
+    const style = document.getElementById(`${mountId}-style`);
+    if (style) {
+      style.remove();
+    }
+    container.remove();
+  };
+  return {
+    id: mountId,
+    widget,
+    mode: "embedded",
+    target,
+    inputs,
+    unmount
+  };
+}
+async function reloadEmbedded(mounted, widget, image, proxy) {
+  mounted.unmount();
+  return mountEmbedded(
+    widget,
+    { target: mounted.target, mode: "embedded", inputs: mounted.inputs },
+    image,
+    proxy
+  );
+}
+
+// src/transforms/cdn.ts
+var EXTERNAL_PACKAGES = /* @__PURE__ */ new Set(["react", "react-dom", "ink"]);
+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",
+  "timers",
+  "tls",
+  "tty",
+  "url",
+  "util",
+  "v8",
+  "vm",
+  "worker_threads",
+  "zlib"
+]);
+function cdnTransformPlugin(options = {}) {
+  const {
+    packages = {},
+    external = [],
+    bundle = false,
+    globals = {},
+    deps = {},
+    aliases = {}
+  } = options;
+  const externalSet = /* @__PURE__ */ new Set([...EXTERNAL_PACKAGES, ...external]);
+  const globalsSet = new Set(Object.keys(globals));
+  return {
+    name: "cdn-transform",
+    setup(build2) {
+      build2.onResolve({ filter: /.*/ }, (args) => {
+        const aliasTarget = matchAlias(args.path, aliases);
+        if (aliasTarget) {
+          const { packageName, subpath } = parseImportPath(aliasTarget);
+          if (globalsSet.has(packageName)) {
+            return {
+              path: aliasTarget,
+              namespace: "global-inject"
+            };
+          }
+          const version2 = packages[packageName];
+          let url = toEsmShUrl(
+            packageName,
+            version2,
+            subpath,
+            Object.keys(deps).length > 0 ? deps : void 0
+          );
+          if (bundle) {
+            url += url.includes("?") ? "&bundle" : "?bundle";
+          }
+          return {
+            path: url,
+            external: true
+          };
+        }
+        return null;
+      });
+      build2.onResolve({ filter: /.*/ }, (args) => {
+        if (!isBareImport(args.path)) {
+          return null;
+        }
+        const { packageName } = parseImportPath(args.path);
+        if (globalsSet.has(packageName)) {
+          return {
+            path: args.path,
+            namespace: "global-inject"
+          };
+        }
+        return null;
+      });
+      build2.onLoad({ filter: /.*/, namespace: "global-inject" }, (args) => {
+        const { packageName, subpath } = parseImportPath(args.path);
+        const globalName = globals[packageName];
+        if (!globalName) return null;
+        if (subpath) {
+          return {
+            contents: `export * from '${packageName}'; export { default } from '${packageName}';`,
+            loader: "js"
+          };
+        }
+        const contents = `
+const mod = window.${globalName};
+export default mod;
+// Re-export all properties as named exports
+const { ${getCommonExports(packageName).join(", ")} } = mod;
+export { ${getCommonExports(packageName).join(", ")} };
+`;
+        return {
+          contents,
+          loader: "js"
+        };
+      });
+      build2.onResolve({ filter: /.*/ }, (args) => {
+        if (!isBareImport(args.path)) {
+          return null;
         }
-      }
-    }
-  } finally {
-    URL.revokeObjectURL(scriptUrl);
-  }
-  const unmount = () => {
-    if (moduleCleanup) {
-      moduleCleanup();
-    }
-    removeNamespaceGlobals(window, namespaceNames);
-    const style = document.getElementById(`${mountId}-style`);
-    if (style) {
-      style.remove();
+        if (NODE_BUILTINS.has(args.path)) {
+          return { external: true };
+        }
+        const { packageName, subpath } = parseImportPath(args.path);
+        if (globalsSet.has(packageName)) {
+          return null;
+        }
+        if (externalSet.has(packageName)) {
+          return { external: true };
+        }
+        const version2 = packages[packageName];
+        let url = toEsmShUrl(
+          packageName,
+          version2,
+          subpath,
+          Object.keys(deps).length > 0 ? deps : void 0
+        );
+        if (bundle) {
+          url += url.includes("?") ? "&bundle" : "?bundle";
+        }
+        return {
+          path: url,
+          external: true
+        };
+      });
     }
-    container.remove();
-  };
-  return {
-    id: mountId,
-    widget,
-    mode: "embedded",
-    target,
-    inputs,
-    unmount
   };
 }
-async function reloadEmbedded(mounted, widget, image, proxy) {
-  mounted.unmount();
-  return mountEmbedded(
-    widget,
-    { target: mounted.target, mode: "embedded", inputs: mounted.inputs },
-    image,
-    proxy
-  );
+function generateImportMap(packages) {
+  const imports = {};
+  for (const [name, version2] of Object.entries(packages)) {
+    imports[name] = toEsmShUrl(name, version2);
+  }
+  return imports;
 }
 
 // src/mount/iframe.ts
@@ -1474,20 +1303,183 @@ function disposeIframeBridge() {
   }
 }
 
+// src/transforms/vfs.ts
+function dirname(path) {
+  const idx = path.lastIndexOf("/");
+  return idx === -1 ? "." : path.slice(0, idx) || ".";
+}
+function normalizePath(path) {
+  const parts = [];
+  for (const segment of path.split("/")) {
+    if (segment === "..") parts.pop();
+    else if (segment && segment !== ".") parts.push(segment);
+  }
+  return parts.join("/");
+}
+function inferLoader(path, language) {
+  if (language) {
+    switch (language) {
+      case "typescript":
+      case "ts":
+        return "ts";
+      case "tsx":
+        return "tsx";
+      case "javascript":
+      case "js":
+        return "js";
+      case "jsx":
+        return "jsx";
+      case "json":
+        return "json";
+      case "css":
+        return "css";
+    }
+  }
+  const ext = path.split(".").pop();
+  switch (ext) {
+    case "ts":
+      return "ts";
+    case "tsx":
+      return "tsx";
+    case "js":
+      return "js";
+    case "jsx":
+      return "jsx";
+    case "json":
+      return "json";
+    case "css":
+      return "css";
+    default:
+      return "tsx";
+  }
+}
+function normalizeVFSPath(path) {
+  if (path.startsWith("@/")) {
+    return path.slice(2);
+  }
+  return path;
+}
+function resolveRelativePath(importer, target) {
+  const importerDir = dirname(normalizeVFSPath(importer));
+  const combined = importerDir === "." ? target : `${importerDir}/${target}`;
+  return normalizePath(combined);
+}
+function matchAlias2(importPath, aliases) {
+  if (!aliases) return null;
+  for (const [pattern, target] of Object.entries(aliases)) {
+    if (pattern.endsWith("/*")) {
+      const prefix = pattern.slice(0, -2);
+      if (importPath === prefix || importPath.startsWith(prefix + "/")) {
+        return target;
+      }
+    }
+    if (importPath === pattern) {
+      return target;
+    }
+  }
+  return null;
+}
+function findFile(project, path) {
+  if (project.files.has(path)) return path;
+  const extensions = [".tsx", ".ts", ".jsx", ".js", ".json"];
+  for (const ext of extensions) {
+    if (project.files.has(path + ext)) return path + ext;
+  }
+  for (const ext of extensions) {
+    const indexPath = `${path}/index${ext}`;
+    if (project.files.has(indexPath)) return indexPath;
+  }
+  return null;
+}
+function vfsPlugin(project, options = {}) {
+  return {
+    name: "patchwork-vfs",
+    setup(build2) {
+      build2.onResolve({ filter: /^@\// }, (args) => {
+        const aliased = matchAlias2(args.path, options.aliases);
+        if (aliased) return null;
+        return { path: args.path, namespace: "vfs" };
+      });
+      build2.onResolve({ filter: /^\./ }, (args) => {
+        const fromEntry = args.namespace !== "vfs" && args.importer === project.entry;
+        if (args.namespace !== "vfs" && !fromEntry) return null;
+        const resolved = resolveRelativePath(args.importer, args.path);
+        return { path: resolved, namespace: "vfs" };
+      });
+      build2.onLoad({ filter: /.*/, namespace: "vfs" }, (args) => {
+        const normalPath = normalizeVFSPath(args.path);
+        const filePath = findFile(project, normalPath);
+        if (!filePath) {
+          throw new Error(`File not found in VFS: ${args.path}`);
+        }
+        const file = project.files.get(filePath);
+        return {
+          contents: file.content,
+          loader: inferLoader(filePath, file.language)
+        };
+      });
+    }
+  };
+}
+
+// src/vfs/project.ts
+function createProjectFromFiles(files, id = crypto.randomUUID()) {
+  const fileMap = /* @__PURE__ */ new Map();
+  for (const file of files) {
+    fileMap.set(file.path, file);
+  }
+  return { id, entry: resolveEntry(fileMap), files: fileMap };
+}
+function resolveEntry(files) {
+  const paths = Array.from(files.keys());
+  const mainFile = paths.find((p) => /\bmain\.(tsx?|jsx?)$/.test(p));
+  if (mainFile) return mainFile;
+  const indexFile = paths.find((p) => /\bindex\.(tsx?|jsx?)$/.test(p));
+  if (indexFile) return indexFile;
+  const firstTsx = paths.find((p) => /\.(tsx|jsx)$/.test(p));
+  if (firstTsx) return firstTsx;
+  return paths[0] || "main.tsx";
+}
+function detectMainFile(language) {
+  switch (language) {
+    case "tsx":
+    case "typescript":
+      return "main.tsx";
+    case "jsx":
+    case "javascript":
+      return "main.jsx";
+    case "ts":
+      return "main.ts";
+    case "js":
+      return "main.js";
+    default:
+      return "main.tsx";
+  }
+}
+function createSingleFileProject(content, entry = "main.tsx", id = "inline") {
+  return {
+    id,
+    entry,
+    files: /* @__PURE__ */ new Map([[entry, { path: entry, content }]])
+  };
+}
+
 // src/compiler.ts
 var esbuildInitialized = false;
 var esbuildInitPromise = null;
-async function initEsbuild() {
+var DEFAULT_ESBUILD_WASM_URL = `https://unpkg.com/esbuild-wasm@${esbuild.version}/esbuild.wasm`;
+async function initEsbuild(urlOverrides) {
   if (esbuildInitialized) return;
   if (esbuildInitPromise) return esbuildInitPromise;
+  const wasmUrl = urlOverrides?.["esbuild-wasm/esbuild.wasm"] || DEFAULT_ESBUILD_WASM_URL;
   esbuildInitPromise = (async () => {
     try {
       await esbuild.initialize({
-        wasmURL: "https://unpkg.com/esbuild-wasm/esbuild.wasm"
+        wasmURL: wasmUrl
       });
       esbuildInitialized = true;
     } catch (error) {
-      if (error instanceof Error && error.message.includes("initialized")) {
+      if (error instanceof Error && error.message.includes("initialize")) {
         esbuildInitialized = true;
       } else {
         throw error;
@@ -1506,19 +1498,19 @@ function hashContent(content) {
   return Math.abs(hash).toString(16).padStart(8, "0");
 }
 async function createCompiler(options) {
-  await initEsbuild();
-  const { image: imageSpec, proxyUrl, cdnBaseUrl: cdnBaseUrl3, widgetCdnBaseUrl } = options;
-  if (cdnBaseUrl3) {
-    setCdnBaseUrl(cdnBaseUrl3);
+  await initEsbuild(options.urlOverrides);
+  const { image: imageSpec, proxyUrl, cdnBaseUrl: cdnBaseUrl2, widgetCdnBaseUrl } = options;
+  if (cdnBaseUrl2) {
+    setCdnBaseUrl(cdnBaseUrl2);
   }
   if (widgetCdnBaseUrl) {
-    setCdnBaseUrl2(widgetCdnBaseUrl);
-  } else if (cdnBaseUrl3) {
-    setCdnBaseUrl2(cdnBaseUrl3);
+    setCdnBaseUrl(widgetCdnBaseUrl);
+  } else if (cdnBaseUrl2) {
+    setCdnBaseUrl(cdnBaseUrl2);
   }
   const registry = getImageRegistry();
   await registry.preload(imageSpec);
-  const proxy = createHttpServiceProxy(proxyUrl);
+  const proxy = createHttpProxy(proxyUrl);
   return new PatchworkCompiler(proxy, registry);
 }
 var PatchworkCompiler = class {
@@ -1795,11 +1787,13 @@ var VirtualFS = class {
     return this.backend.readFile(path, encoding);
   }
   async writeFile(path, content) {
+    await this.ensureParentDir(path);
     const existed = await this.backend.exists(path);
     await this.backend.writeFile(path, content);
     this.recordChange(path, existed ? "update" : "create");
   }
   async applyRemoteFile(path, content) {
+    await this.ensureParentDir(path);
     await this.backend.writeFile(path, content);
   }
   async applyRemoteDelete(path) {
@@ -1871,6 +1865,11 @@ var VirtualFS = class {
       listener(record);
     }
   }
+  async ensureParentDir(path) {
+    const dir = dirname2(path);
+    if (!dir) return;
+    await this.backend.mkdir(dir, { recursive: true });
+  }
 };
 
 // src/vfs/sync/differ.ts
@@ -1934,6 +1933,8 @@ var SyncEngineImpl = class {
     this.basePath = config.basePath ?? "";
     this.startRemoteWatch();
   }
+  local;
+  remote;
   status = "idle";
   intervalId;
   listeners = /* @__PURE__ */ new Map();
@@ -2239,7 +2240,7 @@ function openDB() {
     const request = indexedDB.open(DB_NAME, DB_VERSION);
     request.onerror = () => reject(request.error);
     request.onsuccess = () => resolve(request.result);
-    request.onupgradeneeded = (event) => {
+    request.onupgradeneeded = (_event) => {
       const db = request.result;
       if (!db.objectStoreNames.contains(FILES_STORE)) {
         db.createObjectStore(FILES_STORE);
@@ -2265,6 +2266,7 @@ var IndexedDBBackend = class {
   constructor(prefix = "vfs") {
     this.prefix = prefix;
   }
+  prefix;
   key(path) {
     return `${this.prefix}:${normalizePath2(path)}`;
   }
@@ -2435,6 +2437,7 @@ var HttpBackend = class {
   constructor(config) {
     this.config = config;
   }
+  config;
   async readFile(path) {
     const res = await fetch(this.url(path));
     if (!res.ok) throw new Error(`ENOENT: ${path}`);
@@ -2538,6 +2541,7 @@ var VFSStore = class {
       }
     }
   }
+  provider;
   local;
   syncEngine;
   root;
@@ -2647,6 +2651,13 @@ var VFSStore = class {
       )
     );
   }
+  watch(path, callback) {
+    if (this.provider.watch) {
+      return this.provider.watch(this.remotePath(path), callback);
+    }
+    return () => {
+    };
+  }
   async sync() {
     if (!this.syncEngine) {
       return { pushed: 0, pulled: 0, conflicts: [] };
@@ -2683,6 +2694,7 @@ var VFSStore = class {
 };
 export {
   CompileOptionsSchema,
+  DEFAULT_CDN_BASE,
   DEFAULT_CLI_IMAGE_CONFIG,
   DEFAULT_IMAGE_CONFIG,
   DEV_SANDBOX,
@@ -2701,8 +2713,8 @@ export {
   cdnTransformPlugin,
   createCompiler,
   createFieldAccessProxy,
-  createHttpServiceProxy,
-  createIframeServiceProxy,
+  createHttpProxy,
+  createIframeProxy,
   createImageRegistry,
   createProjectFromFiles,
   createSingleFileProject,
@@ -2714,14 +2726,19 @@ export {
   generateImportMap,
   generateNamespaceGlobals,
   getCdnBaseUrl,
+  getCommonExports,
   getImageRegistry,
   injectNamespaceGlobals,
+  isBareImport,
   loadImage,
+  matchAlias,
   mountEmbedded,
   mountIframe,
   parseImageConfig,
   parseImageSpec,
+  parseImportPath,
   parseManifest,
+  parsePackageSpec,
   reloadEmbedded,
   reloadIframe,
   removeNamespaceGlobals,
@@ -2729,6 +2746,7 @@ export {
   safeParseImageConfig,
   safeParseManifest,
   setCdnBaseUrl,
+  toEsmShUrl,
   vfsPlugin
 };
 //# sourceMappingURL=index.js.map