@aprovan/patchwork 0.1.0

package/packages/bobbin/src/utils/dom.ts

@@ -0,0 +1,36 @@
+export function applyStyleToElement(
+  el: HTMLElement,
+  property: string,
+  value: string,
+): void {
+  el.style.setProperty(property, value);
+}
+
+export function enableContentEditable(el: HTMLElement, enabled: boolean): void {
+  if (enabled) {
+    el.contentEditable = 'true';
+    // Recursively enable for text nodes
+    const textElements = el.querySelectorAll(
+      'p, span, h1, h2, h3, h4, h5, h6, a, li, td, th, label, div',
+    );
+    textElements.forEach((child) => {
+      if (child instanceof HTMLElement && child.childNodes.length > 0) {
+        // Only make editable if it has direct text content
+        for (const node of child.childNodes) {
+          if (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()) {
+            child.contentEditable = 'true';
+            break;
+          }
+        }
+      }
+    });
+  } else {
+    el.contentEditable = 'false';
+    const textElements = el.querySelectorAll('[contenteditable="true"]');
+    textElements.forEach((child) => {
+      if (child instanceof HTMLElement) {
+        child.contentEditable = 'false';
+      }
+    });
+  }
+}

package/packages/bobbin/src/utils/selectors.ts

@@ -0,0 +1,76 @@
+export function generateId(): string {
+  return Math.random().toString(36).substring(2, 15);
+}
+
+export function getElementPath(el: HTMLElement): string {
+  const path: string[] = [];
+  let current: HTMLElement | null = el;
+
+  while (current && current !== document.body) {
+    let selector = current.tagName.toLowerCase();
+
+    if (current.id) {
+      selector = `#${current.id}`;
+      path.unshift(selector);
+      break;
+    }
+
+    // Add nth-child for uniqueness
+    const parent = current.parentElement;
+    if (parent) {
+      const siblings = Array.from(parent.children).filter(
+        (c) => c.tagName === current!.tagName,
+      );
+      if (siblings.length > 1) {
+        const index = siblings.indexOf(current) + 1;
+        selector += `:nth-of-type(${index})`;
+      }
+    }
+
+    path.unshift(selector);
+    current = current.parentElement;
+  }
+
+  return path.join(' > ');
+}
+
+export function getElementXPath(el: HTMLElement): string {
+  const parts: string[] = [];
+  let current: HTMLElement | null = el;
+
+  while (
+    current &&
+    current !== document.body &&
+    current !== document.documentElement
+  ) {
+    let part = current.tagName.toLowerCase();
+
+    // If element has an id, use it as anchor
+    if (current.id) {
+      parts.unshift(`//*[@id="${current.id}"]`);
+      break;
+    }
+
+    // Calculate position among siblings of same tag
+    const parent = current.parentElement;
+    if (parent) {
+      const siblings = Array.from(parent.children).filter(
+        (c) => c.tagName === current!.tagName,
+      );
+      if (siblings.length > 1) {
+        const index = siblings.indexOf(current) + 1;
+        part += `[${index}]`;
+      }
+    }
+
+    parts.unshift(part);
+    current = current.parentElement;
+  }
+
+  // If we didn't find an id anchor, start from root
+  if (!parts[0]?.startsWith('//*[@id')) {
+    parts.unshift('');
+  }
+
+  return parts.join('/') || '//' + el.tagName.toLowerCase();
+}

package/packages/bobbin/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "jsx": "react-jsx"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}

package/packages/bobbin/tsup.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'tsup';
+
+export default defineConfig({
+  entry: ['src/index.ts'],
+  format: ['esm'],
+  dts: true,
+  clean: true,
+  external: ['react', 'react-dom'],
+  treeshake: true,
+});

package/packages/compiler/node_modules/.bin/esbuild

@@ -0,0 +1,17 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/home/runner/work/patchwork/patchwork/node_modules/.pnpm/esbuild-wasm@0.27.3/node_modules/esbuild-wasm/bin/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/esbuild-wasm@0.27.3/node_modules/esbuild-wasm/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/esbuild-wasm@0.27.3/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/home/runner/work/patchwork/patchwork/node_modules/.pnpm/esbuild-wasm@0.27.3/node_modules/esbuild-wasm/bin/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/esbuild-wasm@0.27.3/node_modules/esbuild-wasm/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/esbuild-wasm@0.27.3/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../esbuild-wasm/bin/esbuild" "$@"
+else
+  exec node  "$basedir/../esbuild-wasm/bin/esbuild" "$@"
+fi

package/packages/compiler/node_modules/.bin/jiti

@@ -0,0 +1,17 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/home/runner/work/patchwork/patchwork/node_modules/.pnpm/jiti@1.21.7/node_modules/jiti/bin/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/jiti@1.21.7/node_modules/jiti/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/jiti@1.21.7/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/home/runner/work/patchwork/patchwork/node_modules/.pnpm/jiti@1.21.7/node_modules/jiti/bin/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/jiti@1.21.7/node_modules/jiti/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/jiti@1.21.7/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../../../../node_modules/.pnpm/jiti@1.21.7/node_modules/jiti/bin/jiti.js" "$@"
+else
+  exec node  "$basedir/../../../../node_modules/.pnpm/jiti@1.21.7/node_modules/jiti/bin/jiti.js" "$@"
+fi

package/packages/compiler/node_modules/.bin/tsc

@@ -0,0 +1,17 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/home/runner/work/patchwork/patchwork/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/bin/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/typescript@5.9.3/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/home/runner/work/patchwork/patchwork/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/bin/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/typescript@5.9.3/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../typescript/bin/tsc" "$@"
+else
+  exec node  "$basedir/../typescript/bin/tsc" "$@"
+fi

package/packages/compiler/node_modules/.bin/tsserver

@@ -0,0 +1,17 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/home/runner/work/patchwork/patchwork/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/bin/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/typescript@5.9.3/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/home/runner/work/patchwork/patchwork/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/bin/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/typescript@5.9.3/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../typescript/bin/tsserver" "$@"
+else
+  exec node  "$basedir/../typescript/bin/tsserver" "$@"
+fi

package/packages/compiler/node_modules/.bin/tsup

@@ -0,0 +1,17 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/home/runner/work/patchwork/patchwork/node_modules/.pnpm/tsup@8.5.1_jiti@1.21.7_postcss@8.5.6_tsx@4.21.0_typescript@5.9.3/node_modules/tsup/dist/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/tsup@8.5.1_jiti@1.21.7_postcss@8.5.6_tsx@4.21.0_typescript@5.9.3/node_modules/tsup/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/tsup@8.5.1_jiti@1.21.7_postcss@8.5.6_tsx@4.21.0_typescript@5.9.3/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/home/runner/work/patchwork/patchwork/node_modules/.pnpm/tsup@8.5.1_jiti@1.21.7_postcss@8.5.6_tsx@4.21.0_typescript@5.9.3/node_modules/tsup/dist/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/tsup@8.5.1_jiti@1.21.7_postcss@8.5.6_tsx@4.21.0_typescript@5.9.3/node_modules/tsup/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/tsup@8.5.1_jiti@1.21.7_postcss@8.5.6_tsx@4.21.0_typescript@5.9.3/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../tsup/dist/cli-default.js" "$@"
+else
+  exec node  "$basedir/../tsup/dist/cli-default.js" "$@"
+fi

package/packages/compiler/node_modules/.bin/tsup-node

@@ -0,0 +1,17 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/home/runner/work/patchwork/patchwork/node_modules/.pnpm/tsup@8.5.1_jiti@1.21.7_postcss@8.5.6_tsx@4.21.0_typescript@5.9.3/node_modules/tsup/dist/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/tsup@8.5.1_jiti@1.21.7_postcss@8.5.6_tsx@4.21.0_typescript@5.9.3/node_modules/tsup/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/tsup@8.5.1_jiti@1.21.7_postcss@8.5.6_tsx@4.21.0_typescript@5.9.3/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/home/runner/work/patchwork/patchwork/node_modules/.pnpm/tsup@8.5.1_jiti@1.21.7_postcss@8.5.6_tsx@4.21.0_typescript@5.9.3/node_modules/tsup/dist/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/tsup@8.5.1_jiti@1.21.7_postcss@8.5.6_tsx@4.21.0_typescript@5.9.3/node_modules/tsup/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/tsup@8.5.1_jiti@1.21.7_postcss@8.5.6_tsx@4.21.0_typescript@5.9.3/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../tsup/dist/cli-node.js" "$@"
+else
+  exec node  "$basedir/../tsup/dist/cli-node.js" "$@"
+fi

package/packages/compiler/node_modules/.bin/tsx

@@ -0,0 +1,17 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/home/runner/work/patchwork/patchwork/node_modules/.pnpm/tsx@4.21.0/node_modules/tsx/dist/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/tsx@4.21.0/node_modules/tsx/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/tsx@4.21.0/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/home/runner/work/patchwork/patchwork/node_modules/.pnpm/tsx@4.21.0/node_modules/tsx/dist/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/tsx@4.21.0/node_modules/tsx/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/tsx@4.21.0/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../../../../node_modules/.pnpm/tsx@4.21.0/node_modules/tsx/dist/cli.mjs" "$@"
+else
+  exec node  "$basedir/../../../../node_modules/.pnpm/tsx@4.21.0/node_modules/tsx/dist/cli.mjs" "$@"
+fi

package/packages/compiler/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@aprovan/patchwork-compiler",
+  "version": "0.1.0",
+  "description": "Patchwork compiler - JSX→ESM compilation, image loading, DOM mounting",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "build": "tsup",
+    "check-types": "tsc --noEmit",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "esbuild-wasm": "^0.27.2",
+    "zod": "^3.23.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.10.5",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.3"
+  },
+  "engines": {
+    "node": ">=20.0.0"
+  }
+}

package/packages/compiler/src/compiler.ts

@@ -0,0 +1,258 @@
+import * as esbuild from 'esbuild-wasm';
+import type {
+  Compiler,
+  CompilerOptions,
+  CompileOptions,
+  CompiledWidget,
+  Manifest,
+  MountedWidget,
+  MountOptions,
+  ServiceProxy,
+} from './types.js';
+import type { VirtualProject } from './vfs/types.js';
+import { createSingleFileProject } from './vfs/project.js';
+import { getImageRegistry } from './images/registry.js';
+import { setCdnBaseUrl as setImageCdnBaseUrl } from './images/loader.js';
+import { setCdnBaseUrl as setTransformCdnBaseUrl } from './transforms/cdn.js';
+import { cdnTransformPlugin } from './transforms/cdn.js';
+import { vfsPlugin } from './transforms/vfs.js';
+import { createHttpServiceProxy } from './mount/bridge.js';
+import { mountEmbedded, reloadEmbedded } from './mount/embedded.js';
+import { mountIframe, reloadIframe } from './mount/iframe.js';
+
+// Track esbuild initialization
+let esbuildInitialized = false;
+let esbuildInitPromise: Promise<void> | null = null;
+
+/**
+ * Initialize esbuild-wasm (must be called before using esbuild)
+ */
+async function initEsbuild(): Promise<void> {
+  if (esbuildInitialized) return;
+  if (esbuildInitPromise) return esbuildInitPromise;
+
+  esbuildInitPromise = (async () => {
+    try {
+      await esbuild.initialize({
+        wasmURL: 'https://unpkg.com/esbuild-wasm/esbuild.wasm',
+      });
+      esbuildInitialized = true;
+    } catch (error) {
+      // If already initialized, that's fine
+      if (error instanceof Error && error.message.includes('initialized')) {
+        esbuildInitialized = true;
+      } else {
+        throw error;
+      }
+    }
+  })();
+
+  return esbuildInitPromise;
+}
+
+/**
+ * Generate a content hash for caching
+ */
+function hashContent(content: string): string {
+  // Use Web Crypto API for browser compatibility
+  const encoder = new TextEncoder();
+  const data = encoder.encode(content);
+  // Simple hash for cache key (not cryptographic)
+  let hash = 0;
+  for (let i = 0; i < data.length; i++) {
+    hash = ((hash << 5) - hash + (data[i] ?? 0)) | 0;
+  }
+  return Math.abs(hash).toString(16).padStart(8, '0');
+}
+
+/**
+ * Create a compiler instance
+ */
+export async function createCompiler(
+  options: CompilerOptions,
+): Promise<Compiler> {
+  // Initialize esbuild-wasm
+  await initEsbuild();
+
+  const { image: imageSpec, proxyUrl, cdnBaseUrl, widgetCdnBaseUrl } = options;
+
+  // Set CDN base URLs (can be different for image loading vs widget imports)
+  if (cdnBaseUrl) {
+    setImageCdnBaseUrl(cdnBaseUrl);
+  }
+  // Widget imports use widgetCdnBaseUrl if provided, otherwise fall back to cdnBaseUrl or default
+  if (widgetCdnBaseUrl) {
+    setTransformCdnBaseUrl(widgetCdnBaseUrl);
+  } else if (cdnBaseUrl) {
+    setTransformCdnBaseUrl(cdnBaseUrl);
+  }
+
+  const registry = getImageRegistry();
+
+  // Pre-load the initial image
+  await registry.preload(imageSpec);
+
+  // Create service proxy
+  const proxy: ServiceProxy = createHttpServiceProxy(proxyUrl);
+
+  return new PatchworkCompiler(proxy, registry);
+}
+
+/**
+ * Patchwork compiler implementation
+ */
+class PatchworkCompiler implements Compiler {
+  private proxy: ServiceProxy;
+  private registry: ReturnType<typeof getImageRegistry>;
+
+  constructor(
+    proxy: ServiceProxy,
+    registry: ReturnType<typeof getImageRegistry>,
+  ) {
+    this.proxy = proxy;
+    this.registry = registry;
+  }
+
+  /**
+   * Pre-load an image package
+   */
+  async preloadImage(spec: string): Promise<void> {
+    await this.registry.preload(spec);
+  }
+
+  /**
+   * Check if an image is loaded
+   */
+  isImageLoaded(spec: string): boolean {
+    return this.registry.has(spec);
+  }
+
+  /**
+   * Compile widget source to ESM
+   */
+  async compile(
+    source: string | VirtualProject,
+    manifest: Manifest,
+    _options: CompileOptions = {},
+  ): Promise<CompiledWidget> {
+    // Normalize input to VirtualProject (entry defined by project, defaults to main.tsx)
+    const project =
+      typeof source === 'string' ? createSingleFileProject(source) : source;
+
+    // Infer loader from entry file extension
+    const entryExt = project.entry.split('.').pop();
+    const loader = entryExt === 'ts' || entryExt === 'tsx' ? 'tsx' : 'jsx';
+
+    // Get image from registry based on manifest
+    const image = this.registry.get(manifest.image) || null;
+
+    // Get config from image (with proper typing)
+    const esbuildConfig = image?.config.esbuild || {};
+    const frameworkConfig = image?.config.framework || {};
+
+    const target = esbuildConfig.target || 'es2020';
+    const format = esbuildConfig.format || 'esm';
+    const jsx = esbuildConfig.jsx ?? 'automatic';
+
+    // Collect all packages (image deps + manifest packages)
+    const packages: Record<string, string> = {
+      ...(image?.dependencies || {}),
+      ...(manifest.packages || {}),
+    };
+
+    const globals = frameworkConfig.globals || {};
+
+    // Get dependency version overrides from image config (e.g., { react: '18' })
+    const deps = frameworkConfig.deps || {};
+
+    // Get import path aliases from image config (e.g., { '@/components/ui/*': '@packagedcn/react' })
+    const aliases = image?.config.aliases || {};
+
+    // Get entry file content
+    const entryFile = project.files.get(project.entry);
+    if (!entryFile) {
+      throw new Error(`Entry file not found: ${project.entry}`);
+    }
+
+    // Build with esbuild using image-provided configuration
+    const result = await esbuild.build({
+      stdin: {
+        contents: entryFile.content,
+        loader,
+        sourcefile: project.entry,
+      },
+      bundle: true,
+      format,
+      target,
+      platform: manifest.platform === 'cli' ? 'node' : 'browser',
+      jsx,
+      ...(esbuildConfig.jsxFactory
+        ? { jsxFactory: esbuildConfig.jsxFactory }
+        : {}),
+      ...(esbuildConfig.jsxFragment
+        ? { jsxFragment: esbuildConfig.jsxFragment }
+        : {}),
+      write: false,
+      sourcemap: 'inline',
+      plugins: [
+        vfsPlugin(project, { aliases }),
+        cdnTransformPlugin({
+          packages,
+          globals,
+          deps,
+          aliases,
+        }),
+      ],
+    });
+
+    const code = result.outputFiles?.[0]?.text || '';
+    const hash = hashContent(code);
+
+    return {
+      code,
+      hash,
+      manifest,
+    };
+  }
+
+  /**
+   * Mount a compiled widget to the DOM
+   */
+  async mount(
+    widget: CompiledWidget,
+    options: MountOptions,
+  ): Promise<MountedWidget> {
+    const image = this.registry.get(widget.manifest.image) || null;
+    if (options.mode === 'iframe') {
+      return mountIframe(widget, options, image, this.proxy);
+    }
+    return mountEmbedded(widget, options, image, this.proxy);
+  }
+
+  /**
+   * Unmount a mounted widget
+   */
+  unmount(mounted: MountedWidget): void {
+    mounted.unmount();
+  }
+
+  /**
+   * Hot reload a mounted widget
+   */
+  async reload(
+    mounted: MountedWidget,
+    source: string | VirtualProject,
+    manifest: Manifest,
+  ): Promise<void> {
+    // Compile new version
+    const widget = await this.compile(source, manifest);
+    const image = this.registry.get(widget.manifest.image) || null;
+
+    // Reload based on mode
+    if (mounted.mode === 'iframe') {
+      await reloadIframe(mounted, widget, image, this.proxy);
+    } else {
+      await reloadEmbedded(mounted, widget, image, this.proxy);
+    }
+  }
+}

package/packages/compiler/src/images/index.ts

@@ -0,0 +1,13 @@
+export {
+  loadImage,
+  parseImageSpec,
+  fetchPackageJson,
+  setCdnBaseUrl,
+  getCdnBaseUrl,
+} from './loader.js';
+
+export {
+  ImageRegistry,
+  getImageRegistry,
+  createImageRegistry,
+} from './registry.js';