browser-playground-core 0.0.1

package/dist/index.mjs

@@ -0,0 +1,1206 @@
+// src/runtimePolyfills.ts
+var ensureBrowserCompat = () => {
+  const g = globalThis;
+  if (!g.process) {
+    g.process = { env: {} };
+    return;
+  }
+  if (!g.process.env) {
+    g.process.env = {};
+  }
+};
+ensureBrowserCompat();
+
+// src/Playground.tsx
+import { useMemo as useMemo3 } from "react";
+
+// src/PlaygroundEditor.tsx
+import { useCallback, useEffect as useEffect2, useRef, useState as useState2 } from "react";
+import Editor from "@monaco-editor/react";
+
+// src/PlaygroundProvider.tsx
+import React, { createContext, useContext, useEffect, useMemo, useState } from "react";
+
+// src/compiler.ts
+import * as Babel from "@babel/standalone";
+import { rollup } from "@rollup/browser";
+
+// src/dependencies.ts
+var depIdentifierForPackage = (pkgName) => {
+  const cleaned = pkgName.replace(/^@/, "").replace(/[^a-zA-Z0-9_$]/g, "_");
+  return `__pg_dep_${cleaned}`;
+};
+var extendCompileConfigWithDependencies = (config, pkgNames) => {
+  if (!pkgNames.length) return config;
+  const allowedBareImports = new Set(config.allowedBareImports);
+  const rollupExternal = new Set(config.rollupExternal);
+  const rollupGlobals = { ...config.rollupGlobals };
+  for (const pkgName of pkgNames) {
+    allowedBareImports.add(pkgName);
+    rollupExternal.add(pkgName);
+    if (rollupGlobals[pkgName] == null) {
+      rollupGlobals[pkgName] = depIdentifierForPackage(pkgName);
+    }
+  }
+  return {
+    ...config,
+    allowedBareImports: Array.from(allowedBareImports),
+    rollupExternal: Array.from(rollupExternal),
+    rollupGlobals
+  };
+};
+
+// src/compiler.ts
+var defaultBabelPlugins = [];
+var babelTransform = (code, filename = "UserComponent.tsx") => {
+  var _a;
+  const result = Babel.transform(code, {
+    filename,
+    presets: [
+      ["env", { modules: false, targets: { esmodules: true } }],
+      "typescript",
+      ["react", { runtime: "classic" }]
+    ],
+    parserOpts: {
+      plugins: defaultBabelPlugins
+    }
+  });
+  return (_a = result.code) != null ? _a : "";
+};
+async function compileUserCode(rawCode, plugins = []) {
+  return compileVirtualFiles({ "/UserPreview.tsx": rawCode }, "/UserPreview.tsx", plugins);
+}
+async function compileVirtualFiles(rawFiles, entryFile, plugins = [], options) {
+  var _a;
+  let files = normalizeVirtualFileSystem(rawFiles);
+  let entry = normalizeVfsPath(entryFile);
+  if (!files[entry]) {
+    const first = Object.keys(files)[0];
+    return { code: null, error: `Entry file not found: "${entry}". Available files: ${first ? `"${first}"...` : "(none)"}` };
+  }
+  try {
+    for (const plugin of plugins) {
+      if (!plugin.transformVirtualFiles) continue;
+      const transformed = await plugin.transformVirtualFiles({ files, entryFile: entry });
+      if (!transformed) continue;
+      files = normalizeVirtualFileSystem(transformed.files);
+      entry = normalizeVfsPath(transformed.entryFile);
+    }
+  } catch (error) {
+    return { code: null, error: formatError(error) };
+  }
+  if (!files[entry]) {
+    return { code: null, error: `Entry file not found after plugin transforms: "${entry}".` };
+  }
+  const compileConfigBase = resolveCompileConfig(plugins, { files, entryFile: entry });
+  const compileConfig = extendCompileConfigWithDependencies(compileConfigBase, (_a = options == null ? void 0 : options.dependencies) != null ? _a : []);
+  let workingFiles = { ...files };
+  try {
+    for (const plugin of plugins) {
+      if (!plugin.beforeCompile) continue;
+      const next = {};
+      for (const [path, code] of Object.entries(workingFiles)) {
+        next[path] = await plugin.beforeCompile(code);
+      }
+      workingFiles = next;
+    }
+  } catch (error) {
+    return { code: null, error: formatError(error) };
+  }
+  let bundled;
+  try {
+    bundled = await bundleVirtualFilesWithRollup(workingFiles, entry, compileConfig);
+  } catch (error) {
+    return { code: null, error: formatError(error) };
+  }
+  const wrapped = wrapIifeExecutable(bundled, compileConfig.iifeName);
+  let result = {
+    code: wrapped,
+    error: null,
+    runtime: compileConfig.runtime,
+    runtimeGlobalNames: Array.from(new Set(Object.values(compileConfig.rollupGlobals)))
+  };
+  try {
+    for (const plugin of plugins) {
+      if (plugin.afterCompile) {
+        result = await plugin.afterCompile(result);
+      }
+    }
+  } catch (error) {
+    return { code: null, error: formatError(error) };
+  }
+  return result;
+}
+async function bundleWithRollup(source) {
+  const code = await bundleVirtualFilesWithRollup({ "/entry.tsx": source }, "/entry.tsx", defaultReactCompileConfig());
+  return code;
+}
+var wrapIifeExecutable = (bundledCode, globalName) => {
+  return `${bundledCode}
+const __playground_export__ =
+  typeof ${globalName} !== 'undefined' && ${globalName} && (${globalName}.default ?? ${globalName});
+return __playground_export__;`;
+};
+var bundleVirtualFilesWithRollup = async (files, entryFile, config) => {
+  var _a, _b;
+  const bundle = await rollup({
+    input: entryFile,
+    external: config.rollupExternal,
+    plugins: [
+      {
+        name: "virtual-fs",
+        resolveId(source, importer) {
+          if (config.allowedBareImports.includes(source)) return null;
+          const importerPath = importer ? stripQuery(importer) : null;
+          if (!importerPath && source === entryFile) {
+            return source;
+          }
+          if (source.startsWith("/") || source.startsWith("./") || source.startsWith("../")) {
+            const resolved = resolveVfsImport(source, importerPath != null ? importerPath : entryFile, files);
+            if (!resolved) {
+              throw new Error(
+                `Cannot resolve import "${source}" from "${importerPath != null ? importerPath : "(entry)"}".`
+              );
+            }
+            return resolved;
+          }
+          throw new Error(
+            `Only relative/absolute imports are supported in this sandbox; tried to import "${source}".`
+          );
+        },
+        load(id) {
+          const path = stripQuery(id);
+          if (files[path] == null) return null;
+          return files[path];
+        },
+        transform(code, id) {
+          const path = stripQuery(id);
+          if (files[path] == null) return null;
+          const compiled = babelTransform(code, path);
+          return { code: compiled, map: null };
+        }
+      }
+    ]
+  });
+  const { output } = await bundle.generate({
+    format: "iife",
+    name: config.iifeName,
+    globals: config.rollupGlobals
+  });
+  await bundle.close();
+  return (_b = (_a = output[0]) == null ? void 0 : _a.code) != null ? _b : "";
+};
+var stripQuery = (id) => {
+  var _a;
+  return (_a = id.split("?")[0]) != null ? _a : id;
+};
+var normalizeVirtualFileSystem = (files) => {
+  const normalized = {};
+  for (const [path, code] of Object.entries(files)) {
+    normalized[normalizeVfsPath(path)] = code;
+  }
+  return normalized;
+};
+var normalizeVfsPath = (path) => {
+  const replaced = path.replace(/\\/g, "/");
+  const ensured = replaced.startsWith("/") ? replaced : `/${replaced}`;
+  return ensured.replace(/\/+/g, "/");
+};
+var resolveVfsImport = (source, importer, files) => {
+  const baseDir = dirname(importer);
+  const baseResolved = source.startsWith("/") ? normalizeVfsPath(source) : normalizeVfsPath(resolvePath(baseDir, source));
+  const candidates = fileCandidates(baseResolved);
+  for (const candidate of candidates) {
+    if (files[candidate] != null) return candidate;
+  }
+  return null;
+};
+var fileCandidates = (path) => {
+  const hasExt = /\.[a-zA-Z0-9]+$/.test(path);
+  const exts = [".ts", ".tsx", ".js", ".jsx", ".vue"];
+  const candidates = [];
+  if (hasExt) {
+    candidates.push(path);
+    return candidates;
+  }
+  for (const ext of exts) candidates.push(`${path}${ext}`);
+  for (const ext of exts) candidates.push(`${path}/index${ext}`);
+  return candidates;
+};
+var dirname = (path) => {
+  const normalized = normalizeVfsPath(path);
+  const idx = normalized.lastIndexOf("/");
+  if (idx <= 0) return "/";
+  return normalized.slice(0, idx);
+};
+var resolvePath = (baseDir, relative) => {
+  const baseParts = normalizeVfsPath(baseDir).split("/").filter(Boolean);
+  const relParts = relative.split("/").filter(Boolean);
+  const parts = [...baseParts];
+  for (const part of relParts) {
+    if (part === ".") continue;
+    if (part === "..") {
+      parts.pop();
+      continue;
+    }
+    parts.push(part);
+  }
+  return `/${parts.join("/")}`;
+};
+var formatError = (error) => {
+  if (error instanceof Error) return error.message;
+  return typeof error === "string" ? error : "Unknown error";
+};
+var defaultReactCompileConfig = () => ({
+  runtime: "react",
+  allowedBareImports: ["react"],
+  rollupExternal: ["react"],
+  rollupGlobals: { react: "React" },
+  iifeName: "__PlaygroundPreview__"
+});
+var resolveCompileConfig = (plugins, ctx) => {
+  var _a;
+  let config = defaultReactCompileConfig();
+  for (const plugin of plugins) {
+    if (!plugin.extendCompileConfig) continue;
+    config = (_a = plugin.extendCompileConfig(config, ctx)) != null ? _a : config;
+  }
+  return config;
+};
+
+// src/mapping.ts
+import { parse } from "@babel/parser";
+import traverse from "@babel/traverse";
+var PARSER_PLUGINS = ["typescript", "jsx"];
+var MAPPING_TAG = "@pg-mapping";
+function applyFormValueToFiles(files, formValue) {
+  const next = {};
+  for (const [filePath, code] of Object.entries(files)) {
+    next[filePath] = applyFormValueToCode(code, formValue);
+  }
+  return next;
+}
+function applyFormValueToCode(code, formValue) {
+  const mappings = extractMappingsFromCode(code, "/__inline__");
+  if (mappings.length === 0) return code;
+  const replacements = [];
+  for (const mapping of mappings) {
+    const value = getByPath(formValue, mapping.path);
+    if (value === void 0) continue;
+    const text = literalToSource(value, mapping.quoteHint);
+    if (text == null) continue;
+    replacements.push({ start: mapping.initRange.start, end: mapping.initRange.end, text });
+  }
+  if (replacements.length === 0) return code;
+  replacements.sort((a, b) => b.start - a.start);
+  let out = code;
+  for (const r of replacements) {
+    out = out.slice(0, r.start) + r.text + out.slice(r.end);
+  }
+  return out;
+}
+function extractMappedFormValue(files) {
+  const out = {};
+  for (const [filePath, code] of Object.entries(files)) {
+    const mappings = extractMappingsFromCode(code, filePath);
+    for (const mapping of mappings) {
+      if (mapping.initValue === void 0) continue;
+      setByPath(out, mapping.path, mapping.initValue);
+    }
+  }
+  return out;
+}
+function extractMappingsFromCode(code, filePath) {
+  let ast;
+  try {
+    ast = parse(code, { sourceType: "module", plugins: PARSER_PLUGINS, ranges: true, tokens: true });
+  } catch {
+    return [];
+  }
+  const mappings = [];
+  try {
+    traverse(ast, {
+      VariableDeclarator(path) {
+        var _a, _b;
+        const declNode = path.node;
+        const parentNode = (_a = path.parentPath) == null ? void 0 : _a.node;
+        const comment = (_b = findMappingComment(declNode.leadingComments)) != null ? _b : findMappingComment(parentNode == null ? void 0 : parentNode.leadingComments);
+        if (!comment) return;
+        const mappingPath = parseMappingPath(comment);
+        if (!mappingPath) return;
+        const init = declNode.init;
+        if (!init || typeof init.start !== "number" || typeof init.end !== "number") return;
+        const { value, quoteHint } = extractLiteralValueWithHint(code, init);
+        if (value === void 0) return;
+        mappings.push({
+          filePath,
+          path: mappingPath,
+          initRange: { start: init.start, end: init.end },
+          initValue: value,
+          quoteHint
+        });
+      }
+    });
+  } catch {
+    return [];
+  }
+  return mappings;
+}
+var findMappingComment = (comments) => {
+  if (!comments || comments.length === 0) return null;
+  for (const c of comments) {
+    const value = c == null ? void 0 : c.value;
+    if (!value) continue;
+    if (value.includes(MAPPING_TAG)) return value;
+  }
+  return null;
+};
+var parseMappingPath = (commentValue) => {
+  const idx = commentValue.indexOf(MAPPING_TAG);
+  if (idx < 0) return null;
+  const after = commentValue.slice(idx + MAPPING_TAG.length).trim();
+  const start = after.indexOf("[");
+  const end = after.lastIndexOf("]");
+  if (start < 0 || end < 0 || end <= start) return null;
+  const inside = after.slice(start, end + 1).trim();
+  try {
+    const jsonish = inside.replace(/'/g, '"');
+    const parsed = JSON.parse(jsonish);
+    if (!Array.isArray(parsed)) return null;
+    const path = [];
+    for (const seg of parsed) {
+      if (typeof seg === "string" || typeof seg === "number") path.push(seg);
+      else return null;
+    }
+    return path;
+  } catch {
+    return null;
+  }
+};
+var extractLiteralValueWithHint = (code, initNode) => {
+  var _a, _b, _c, _d;
+  if ((initNode == null ? void 0 : initNode.type) === "StringLiteral") {
+    const hint = quoteHintFromSource(code.slice(initNode.start, initNode.end));
+    return { value: initNode.value, quoteHint: hint };
+  }
+  if ((initNode == null ? void 0 : initNode.type) === "NumericLiteral") return { value: initNode.value };
+  if ((initNode == null ? void 0 : initNode.type) === "BooleanLiteral") return { value: initNode.value };
+  if ((initNode == null ? void 0 : initNode.type) === "NullLiteral") return { value: null };
+  if ((initNode == null ? void 0 : initNode.type) === "TemplateLiteral" && Array.isArray(initNode.expressions) && initNode.expressions.length === 0) {
+    return { value: (_d = (_c = (_b = (_a = initNode.quasis) == null ? void 0 : _a[0]) == null ? void 0 : _b.value) == null ? void 0 : _c.cooked) != null ? _d : "", quoteHint: "`" };
+  }
+  return { value: void 0 };
+};
+var quoteHintFromSource = (raw) => {
+  const trimmed = raw.trim();
+  if (trimmed.startsWith("'")) return "'";
+  if (trimmed.startsWith('"')) return '"';
+  if (trimmed.startsWith("`")) return "`";
+  return void 0;
+};
+var literalToSource = (value, quoteHint) => {
+  if (value == null) return "null";
+  if (typeof value === "number") return Number.isFinite(value) ? String(value) : null;
+  if (typeof value === "boolean") return value ? "true" : "false";
+  if (typeof value !== "string") return null;
+  if (quoteHint === "`") {
+    const safe2 = value.replace(/`/g, "\\`").replace(/\$\{/g, "\\${");
+    return `\`${safe2}\``;
+  }
+  if (quoteHint === "'") {
+    const safe2 = value.replace(/\\/g, "\\\\").replace(/'/g, "\\'").replace(/\n/g, "\\n");
+    return `'${safe2}'`;
+  }
+  const safe = value.replace(/\\/g, "\\\\").replace(/"/g, '\\"').replace(/\n/g, "\\n");
+  return `"${safe}"`;
+};
+var getByPath = (root, path) => {
+  let cur = root;
+  for (const seg of path) {
+    if (cur == null) return void 0;
+    cur = cur[seg];
+  }
+  return cur;
+};
+var setByPath = (root, path, value) => {
+  if (!root || path.length === 0) return;
+  let cur = root;
+  for (let i = 0; i < path.length; i++) {
+    const seg = path[i];
+    const isLast = i === path.length - 1;
+    if (isLast) {
+      cur[seg] = value;
+      return;
+    }
+    const nextSeg = path[i + 1];
+    const shouldBeArray = typeof nextSeg === "number";
+    if (cur[seg] == null || typeof cur[seg] !== "object") {
+      cur[seg] = shouldBeArray ? [] : {};
+    }
+    cur = cur[seg];
+  }
+};
+
+// src/PlaygroundProvider.tsx
+import { jsx } from "react/jsx-runtime";
+var defaultSnippet = `import React from 'react';
+
+type GreetingProps = { name: string };
+
+const Card: React.FC<GreetingProps> = ({ name }) => {
+  return (
+    <div style={{ padding: '16px', borderRadius: '12px', background: '#0f172a', color: '#e2e8f0' }}>
+      <h2 style={{ margin: 0 }}>Hello, {name}</h2>
+      <p style={{ marginTop: 8 }}>You can edit this code to see live updates.</p>
+    </div>
+  );
+};
+
+export default function Preview() {
+  return (
+    <div style={{ display: 'grid', gap: '12px', padding: '8px' }}>
+      <Card name="Playground" />
+      <Card name="React" />
+    </div>
+  );
+}
+`;
+var PlaygroundContext = createContext(null);
+var PlaygroundProvider = ({
+  initialCode = defaultSnippet,
+  initialFiles,
+  entryFile = "/App.tsx",
+  plugins = [],
+  dependencies,
+  formValue,
+  onFormValueChange,
+  children
+}) => {
+  var _a;
+  const [files, setFiles] = useState(() => {
+    if (initialFiles && Object.keys(initialFiles).length > 0) return normalizeVirtualFileSystem2(initialFiles);
+    return { [normalizeVfsPath2(entryFile)]: initialCode };
+  });
+  const [activeFilePath, setActiveFilePath] = useState(() => {
+    var _a2;
+    const normalizedEntry = normalizeVfsPath2(entryFile);
+    const normalizedFiles = initialFiles ? normalizeVirtualFileSystem2(initialFiles) : null;
+    if (normalizedFiles && normalizedFiles[normalizedEntry] != null) return normalizedEntry;
+    return normalizedFiles ? (_a2 = Object.keys(normalizedFiles)[0]) != null ? _a2 : normalizedEntry : normalizedEntry;
+  });
+  const [error, setError] = useState(null);
+  const [isCompiling, setIsCompiling] = useState(false);
+  const [renderedComponent, setRenderedComponent] = useState(null);
+  const [renderedDomModule, setRenderedDomModule] = useState(null);
+  const [runtime, setRuntime] = useState("react");
+  const lastAppliedFormValueRef = React.useRef(void 0);
+  const lastEmittedFormValueRef = React.useRef(void 0);
+  useEffect(() => {
+    var _a2;
+    if (initialFiles && Object.keys(initialFiles).length > 0) {
+      const normalized = normalizeVirtualFileSystem2(initialFiles);
+      setFiles(normalized);
+      const normalizedEntry2 = normalizeVfsPath2(entryFile);
+      setActiveFilePath(normalized[normalizedEntry2] != null ? normalizedEntry2 : (_a2 = Object.keys(normalized)[0]) != null ? _a2 : normalizedEntry2);
+      return;
+    }
+    const normalizedEntry = normalizeVfsPath2(entryFile);
+    setFiles({ [normalizedEntry]: initialCode });
+    setActiveFilePath(normalizedEntry);
+  }, [entryFile, initialCode, initialFiles]);
+  useEffect(() => {
+    let cancelled = false;
+    const timeout = window.setTimeout(() => {
+      setIsCompiling(true);
+      runCompilation(files, normalizeVfsPath2(entryFile), plugins, dependencies).then(async (result) => {
+        var _a2, _b, _c;
+        if (cancelled) return;
+        setIsCompiling(false);
+        if (result.error || !result.code) {
+          setError((_a2 = result.error) != null ? _a2 : "Unknown compilation error");
+          setRenderedComponent(null);
+          setRenderedDomModule(null);
+          return;
+        }
+        try {
+          const runtimeGlobalNames = (_b = result.runtimeGlobalNames) != null ? _b : ["React"];
+          const runtimeGlobals = await resolveRuntimeGlobals(runtimeGlobalNames, plugins, (_c = result.runtime) != null ? _c : "react", dependencies);
+          if (cancelled) return;
+          const createModule = new Function(...runtimeGlobalNames, result.code);
+          const moduleExport = createModule(...runtimeGlobals);
+          if (result.runtime === "dom") {
+            if (!moduleExport || typeof moduleExport.mount !== "function") {
+              throw new Error("DOM runtime must export an object with a mount(el) function as default export.");
+            }
+            setRuntime("dom");
+            setRenderedDomModule(() => moduleExport);
+            setRenderedComponent(null);
+            setError(null);
+          } else {
+            if (moduleExport) {
+              setRuntime("react");
+              setRenderedComponent(() => moduleExport);
+              setRenderedDomModule(null);
+              setError(null);
+            }
+          }
+        } catch (err) {
+          setError(formatError2(err));
+          setRenderedComponent(null);
+          setRenderedDomModule(null);
+        }
+      });
+    }, 200);
+    return () => {
+      cancelled = true;
+      window.clearTimeout(timeout);
+    };
+  }, [dependencies, entryFile, files, plugins]);
+  useEffect(() => {
+    if (formValue === void 0) return;
+    if (isDeepEqual(formValue, lastAppliedFormValueRef.current)) return;
+    lastAppliedFormValueRef.current = formValue;
+    setFiles((prev) => {
+      const next = applyFormValueToFiles(prev, formValue);
+      return isDeepEqual(prev, next) ? prev : next;
+    });
+  }, [formValue]);
+  useEffect(() => {
+    if (!onFormValueChange) return;
+    let cancelled = false;
+    const timeout = window.setTimeout(() => {
+      if (cancelled) return;
+      const extracted = extractMappedFormValue(files);
+      const nextValue = mergeFormValue(formValue, extracted);
+      if (isDeepEqual(nextValue, formValue)) return;
+      if (isDeepEqual(nextValue, lastEmittedFormValueRef.current)) return;
+      lastEmittedFormValueRef.current = nextValue;
+      onFormValueChange(nextValue);
+    }, 200);
+    return () => {
+      cancelled = true;
+      window.clearTimeout(timeout);
+    };
+  }, [files, formValue, onFormValueChange]);
+  const updateFile = (path, code2) => {
+    const normalized = normalizeVfsPath2(path);
+    setFiles((prev) => ({ ...prev, [normalized]: code2 }));
+  };
+  const code = (_a = files[normalizeVfsPath2(activeFilePath)]) != null ? _a : "";
+  const setCode = (value2) => updateFile(activeFilePath, value2);
+  const value = useMemo(
+    () => ({
+      files,
+      activeFilePath,
+      setActiveFilePath: (path) => setActiveFilePath(normalizeVfsPath2(path)),
+      updateFile,
+      code,
+      setCode,
+      isCompiling,
+      error,
+      runtime,
+      renderedComponent,
+      renderedDomModule,
+      plugins
+    }),
+    [activeFilePath, code, error, files, isCompiling, plugins, renderedComponent, renderedDomModule, runtime]
+  );
+  return /* @__PURE__ */ jsx(PlaygroundContext.Provider, { value, children });
+};
+var usePlayground = () => {
+  const ctx = useContext(PlaygroundContext);
+  if (!ctx) {
+    throw new Error("usePlayground must be used within a PlaygroundProvider");
+  }
+  return ctx;
+};
+var runCompilation = async (files, entryFile, plugins, dependencies) => {
+  const result = await compileVirtualFiles(files, entryFile, plugins, { dependencies: Object.keys(dependencies != null ? dependencies : {}) });
+  return result;
+};
+var formatError2 = (error) => {
+  if (error instanceof Error) return error.message;
+  return typeof error === "string" ? error : "Unknown runtime error";
+};
+var normalizeVirtualFileSystem2 = (rawFiles) => {
+  const normalized = {};
+  for (const [path, code] of Object.entries(rawFiles)) {
+    normalized[normalizeVfsPath2(path)] = code;
+  }
+  return normalized;
+};
+var normalizeVfsPath2 = (path) => {
+  const replaced = path.replace(/\\/g, "/");
+  const ensured = replaced.startsWith("/") ? replaced : `/${replaced}`;
+  return ensured.replace(/\/+/g, "/");
+};
+var resolveRuntimeGlobals = async (names, plugins, runtime, dependencies) => {
+  const globals = { React };
+  const depIdToPkg = {};
+  for (const plugin of plugins) {
+    if (!plugin.runtimeGlobals) continue;
+    const provided = await plugin.runtimeGlobals({ runtime });
+    Object.assign(globals, provided != null ? provided : {});
+  }
+  for (const [pkgName, value] of Object.entries(dependencies != null ? dependencies : {})) {
+    const id = depIdentifierForPackage(pkgName);
+    depIdToPkg[id] = pkgName;
+    globals[id] = value;
+  }
+  return names.map((n) => {
+    if (globals[n] === void 0) {
+      const pkgName = depIdToPkg[n];
+      throw new Error(
+        pkgName ? `Missing dependency "${pkgName}" (runtime global "${n}"). Pass it via Playground props \`dependencies\` (e.g. \`dependencies={{ "${pkgName}": yourImportedModule }}\`).` : `Missing runtime global "${n}". If you imported a third-party package, pass it via Playground props \`dependencies\`, or provide it via a plugin \`runtimeGlobals\`.`
+      );
+    }
+    return globals[n];
+  });
+};
+var mergeFormValue = (base, overlay) => {
+  if (!isPlainObject(base) || !isPlainObject(overlay)) return overlay;
+  return deepMergeObjects(base, overlay);
+};
+var deepMergeObjects = (base, overlay) => {
+  const out = { ...base };
+  for (const [k, v] of Object.entries(overlay)) {
+    const baseValue = out[k];
+    if (isPlainObject(baseValue) && isPlainObject(v)) {
+      out[k] = deepMergeObjects(baseValue, v);
+    } else {
+      out[k] = v;
+    }
+  }
+  return out;
+};
+var isPlainObject = (value) => {
+  if (value == null || typeof value !== "object") return false;
+  if (Array.isArray(value)) return false;
+  const proto = Object.getPrototypeOf(value);
+  return proto === Object.prototype || proto === null;
+};
+var isDeepEqual = (a, b) => {
+  if (a === b) return true;
+  if (a == null || b == null) return a === b;
+  if (typeof a !== typeof b) return false;
+  if (typeof a !== "object") return false;
+  if (Array.isArray(a) || Array.isArray(b)) {
+    if (!Array.isArray(a) || !Array.isArray(b)) return false;
+    if (a.length !== b.length) return false;
+    for (let i = 0; i < a.length; i++) {
+      if (!isDeepEqual(a[i], b[i])) return false;
+    }
+    return true;
+  }
+  const aKeys = Object.keys(a);
+  const bKeys = Object.keys(b);
+  if (aKeys.length !== bKeys.length) return false;
+  for (const k of aKeys) {
+    if (!Object.prototype.hasOwnProperty.call(b, k)) return false;
+    if (!isDeepEqual(a[k], b[k])) return false;
+  }
+  return true;
+};
+
+// src/PlaygroundFileTree.tsx
+import { useMemo as useMemo2 } from "react";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var PlaygroundFileTree = ({
+  height = "100%",
+  width = 240,
+  className,
+  style
+}) => {
+  const { files, activeFilePath, setActiveFilePath } = usePlayground();
+  const tree = useMemo2(() => buildTree(Object.keys(files)), [files]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className,
+      style: {
+        border: "1px solid #e2e8f0",
+        borderRadius: 12,
+        overflow: "auto",
+        height,
+        width,
+        background: "#0b1224",
+        color: "#e2e8f0",
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsx2("div", { style: { padding: "10px 10px 6px", fontSize: 12, color: "#94a3b8", letterSpacing: 0.4 }, children: "EXPLORER" }),
+        /* @__PURE__ */ jsx2("div", { style: { padding: "0 6px 10px" }, children: tree.children.map((node) => /* @__PURE__ */ jsx2(
+          TreeNodeView,
+          {
+            node,
+            depth: 0,
+            activeFilePath,
+            onSelectFile: setActiveFilePath
+          },
+          node.path
+        )) })
+      ]
+    }
+  );
+};
+var TreeNodeView = ({ node, depth, activeFilePath, onSelectFile }) => {
+  if (node.type === "folder") {
+    return /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx2(
+        "div",
+        {
+          style: {
+            padding: "4px 8px",
+            marginLeft: depth * 10,
+            fontSize: 12,
+            color: "#cbd5e1",
+            textTransform: "uppercase",
+            letterSpacing: 0.6
+          },
+          children: node.name
+        }
+      ),
+      node.children.map((child) => /* @__PURE__ */ jsx2(
+        TreeNodeView,
+        {
+          node: child,
+          depth: depth + 1,
+          activeFilePath,
+          onSelectFile
+        },
+        child.path
+      ))
+    ] });
+  }
+  const isActive = normalizePath(node.path) === normalizePath(activeFilePath);
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: () => onSelectFile(node.path),
+      style: {
+        display: "flex",
+        alignItems: "center",
+        width: "100%",
+        textAlign: "left",
+        cursor: "pointer",
+        border: 0,
+        background: isActive ? "#1d2a4f" : "transparent",
+        color: isActive ? "#e2e8f0" : "#cbd5e1",
+        borderRadius: 8,
+        padding: "6px 8px",
+        marginLeft: depth * 10
+      },
+      children: [
+        /* @__PURE__ */ jsx2("span", { style: { width: 16, opacity: 0.8, marginRight: 6 }, children: "\u25CF" }),
+        /* @__PURE__ */ jsx2("span", { style: { fontSize: 13 }, children: node.name })
+      ]
+    }
+  );
+};
+var buildTree = (paths) => {
+  const root = { type: "folder", name: "", path: "/", children: [] };
+  for (const rawPath of paths.map(normalizePath).sort()) {
+    const parts = rawPath.split("/").filter(Boolean);
+    let current = root;
+    let currentPath = "";
+    for (let i = 0; i < parts.length; i++) {
+      const part = parts[i];
+      currentPath += `/${part}`;
+      const isLeaf = i === parts.length - 1;
+      if (isLeaf) {
+        current.children.push({ type: "file", name: part, path: currentPath });
+        continue;
+      }
+      let folder = current.children.find(
+        (child) => child.type === "folder" && child.name === part
+      );
+      if (!folder) {
+        folder = { type: "folder", name: part, path: currentPath, children: [] };
+        current.children.push(folder);
+      }
+      current = folder;
+    }
+  }
+  sortTree(root);
+  return root;
+};
+var sortTree = (node) => {
+  if (node.type !== "folder") return;
+  node.children.sort((a, b) => {
+    if (a.type !== b.type) return a.type === "folder" ? -1 : 1;
+    return a.name.localeCompare(b.name);
+  });
+  for (const child of node.children) sortTree(child);
+};
+var normalizePath = (path) => {
+  const replaced = path.replace(/\\/g, "/");
+  const ensured = replaced.startsWith("/") ? replaced : `/${replaced}`;
+  return ensured.replace(/\/+/g, "/");
+};
+
+// src/PlaygroundEditor.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var PlaygroundEditor = ({
+  height = "100%",
+  className,
+  style,
+  language,
+  showFileTree,
+  fileTreeDefaultOpen = true,
+  fileTreeWidth = 240
+}) => {
+  const { code, setCode, activeFilePath, files, plugins } = usePlayground();
+  const monacoRef = useRef(null);
+  const filesRef = useRef(files);
+  const pluginsRef = useRef(plugins);
+  const [isFileTreeOpen, setIsFileTreeOpen] = useState2(fileTreeDefaultOpen);
+  useEffect2(() => {
+    setIsFileTreeOpen(fileTreeDefaultOpen);
+  }, [fileTreeDefaultOpen]);
+  useEffect2(() => {
+    filesRef.current = files;
+  }, [files]);
+  useEffect2(() => {
+    pluginsRef.current = plugins;
+  }, [plugins]);
+  const handleBeforeMount = useCallback((monaco) => {
+    monacoRef.current = monaco;
+    monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
+      // Required for TSX parsing/highlighting when models are backed by .tsx filenames.
+      jsx: monaco.languages.typescript.JsxEmit.Preserve,
+      target: monaco.languages.typescript.ScriptTarget.ESNext,
+      allowJs: true,
+      allowNonTsExtensions: true,
+      module: monaco.languages.typescript.ModuleKind.ESNext,
+      moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
+      esModuleInterop: true,
+      allowSyntheticDefaultImports: true
+    });
+    monaco.languages.typescript.typescriptDefaults.setEagerModelSync(true);
+    injectVirtualFilesIntoMonaco(monaco, filesRef.current);
+    for (const plugin of pluginsRef.current) {
+      if (!plugin.setupMonaco) continue;
+      try {
+        const result = plugin.setupMonaco(monaco);
+        if (result && typeof result.then === "function") {
+          result.catch((err) => console.warn("[playground] plugin.setupMonaco failed", err));
+        }
+      } catch (err) {
+        console.warn("[playground] plugin.setupMonaco failed", err);
+      }
+    }
+  }, []);
+  useEffect2(() => {
+    if (!monacoRef.current) return;
+    injectVirtualFilesIntoMonaco(monacoRef.current, files);
+  }, [files]);
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className,
+      style: {
+        border: "1px solid #e2e8f0",
+        borderRadius: 12,
+        overflow: "hidden",
+        height,
+        display: "flex",
+        minWidth: 0,
+        ...style
+      },
+      children: [
+        shouldShowFileTree(showFileTree, files) && /* @__PURE__ */ jsx3(
+          "div",
+          {
+            style: {
+              width: isFileTreeOpen ? fileTreeWidth : 34,
+              borderRight: "1px solid #0f172a",
+              background: "#0b1224",
+              flex: "0 0 auto",
+              height: "100%"
+            },
+            children: isFileTreeOpen ? /* @__PURE__ */ jsxs2("div", { style: { height: "100%", position: "relative" }, children: [
+              /* @__PURE__ */ jsx3("div", { style: { position: "absolute", top: 8, right: 8, zIndex: 2 }, children: /* @__PURE__ */ jsx3(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => {
+                    setIsFileTreeOpen(false);
+                  },
+                  title: "Collapse",
+                  style: iconButtonStyle,
+                  children: "\u27E8"
+                }
+              ) }),
+              /* @__PURE__ */ jsx3(
+                PlaygroundFileTree,
+                {
+                  height: "100%",
+                  width: "100%",
+                  style: { border: "none", borderRadius: 0, background: "transparent" }
+                }
+              )
+            ] }) : /* @__PURE__ */ jsx3(
+              "div",
+              {
+                style: {
+                  height: "100%",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center"
+                },
+                children: /* @__PURE__ */ jsx3(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => {
+                      setIsFileTreeOpen(true);
+                    },
+                    title: "Files",
+                    style: iconButtonStyle,
+                    children: "\u2261"
+                  }
+                )
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx3("div", { style: { flex: 1, minWidth: 0, height: "100%" }, children: /* @__PURE__ */ jsx3(
+          Editor,
+          {
+            height: "100%",
+            defaultLanguage: language != null ? language : languageFromPath(activeFilePath),
+            path: `file://${activeFilePath}`,
+            theme: "vs-dark",
+            value: code,
+            onChange: (value) => setCode(value != null ? value : ""),
+            beforeMount: handleBeforeMount,
+            options: {
+              minimap: { enabled: false },
+              fontSize: 14,
+              smoothScrolling: true,
+              tabSize: 2,
+              fixedOverflowWidgets: true
+            }
+          }
+        ) })
+      ]
+    }
+  );
+};
+var shouldShowFileTree = (showFileTree, files) => {
+  if (typeof showFileTree === "boolean") return showFileTree;
+  return Object.keys(files).length > 1;
+};
+var iconButtonStyle = {
+  border: "1px solid rgba(226, 232, 240, 0.18)",
+  background: "rgba(15, 23, 42, 0.25)",
+  color: "#e2e8f0",
+  cursor: "pointer",
+  borderRadius: 8,
+  width: 26,
+  height: 26,
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  lineHeight: 1
+};
+var injectVirtualFilesIntoMonaco = (monaco, files) => {
+  for (const [rawPath, code] of Object.entries(files)) {
+    const normalizedPath = normalizeVfsPath3(rawPath);
+    const uri = monaco.Uri.parse(`file://${normalizedPath}`);
+    const existing = monaco.editor.getModel(uri);
+    const language = languageFromPath(normalizedPath);
+    if (!existing) {
+      monaco.editor.createModel(code, language, uri);
+      continue;
+    }
+    if (existing.getLanguageId && existing.getLanguageId() !== language) {
+      monaco.editor.setModelLanguage(existing, language);
+    }
+    if (existing.getValue() !== code) {
+      existing.pushEditOperations(
+        [],
+        [
+          {
+            range: existing.getFullModelRange(),
+            text: code
+          }
+        ],
+        () => null
+      );
+    }
+  }
+};
+var normalizeVfsPath3 = (path) => {
+  const replaced = path.replace(/\\/g, "/");
+  const ensured = replaced.startsWith("/") ? replaced : `/${replaced}`;
+  return ensured.replace(/\/+/g, "/");
+};
+var languageFromPath = (path) => {
+  const lower = path.toLowerCase();
+  if (lower.endsWith(".vue")) return "vue";
+  if (lower.endsWith(".ts")) return "typescript";
+  if (lower.endsWith(".tsx")) return "typescript";
+  if (lower.endsWith(".js")) return "javascript";
+  if (lower.endsWith(".jsx")) return "javascript";
+  return "typescript";
+};
+
+// src/PlaygroundRender.tsx
+import React4 from "react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var PlaygroundRender = ({ height = "100%", className, style }) => {
+  const { isCompiling, error, renderedComponent, renderedDomModule, runtime } = usePlayground();
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className,
+      style: {
+        border: "1px solid #e2e8f0",
+        borderRadius: 12,
+        padding: 12,
+        overflow: "auto",
+        position: "relative",
+        height,
+        ...style
+      },
+      children: [
+        isCompiling && /* @__PURE__ */ jsx4(StatusBanner, { message: "Compiling...", tone: "info" }),
+        error && /* @__PURE__ */ jsx4(StatusBanner, { message: error, tone: "error" }),
+        !error && !isCompiling && runtime === "react" && renderedComponent && /* @__PURE__ */ jsx4(RenderSurface, { component: renderedComponent }),
+        !error && !isCompiling && runtime === "dom" && renderedDomModule && /* @__PURE__ */ jsx4(DomRenderSurface, { module: renderedDomModule })
+      ]
+    }
+  );
+};
+var RenderSurface = ({ component: Component }) => {
+  return /* @__PURE__ */ jsx4("div", { style: { width: "100%", height: "100%", color: "#0f172a" }, children: /* @__PURE__ */ jsx4(Component, {}) });
+};
+var DomRenderSurface = ({ module }) => {
+  const ref = React4.useRef(null);
+  React4.useEffect(() => {
+    if (!ref.current) return;
+    const el = ref.current;
+    const result = module.mount(el);
+    return () => {
+      if (typeof module.unmount === "function") {
+        module.unmount();
+        return;
+      }
+      if (typeof result === "function") {
+        result();
+      }
+      el.replaceChildren();
+    };
+  }, [module]);
+  return /* @__PURE__ */ jsx4("div", { ref, style: { width: "100%", height: "100%" } });
+};
+var StatusBanner = ({ message, tone }) => {
+  const colors = tone === "error" ? { background: "#fef2f2", border: "#fecdd3", text: "#991b1b" } : { background: "#eff6ff", border: "#bfdbfe", text: "#1d4ed8" };
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      style: {
+        background: colors.background,
+        border: `1px solid ${colors.border}`,
+        color: colors.text,
+        padding: "10px 12px",
+        borderRadius: 10,
+        fontSize: 14,
+        marginBottom: 8
+      },
+      children: message
+    }
+  );
+};
+
+// src/Playground.tsx
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var Playground = ({
+  initialCode = defaultSnippet,
+  initialFiles,
+  entryFile,
+  plugins = [],
+  dependencies,
+  height = "80vh",
+  showFileTree,
+  fileTreeDefaultOpen,
+  fileTreeWidth,
+  mode = "code",
+  formValue,
+  onFormValueChange,
+  renderForm
+}) => {
+  const layoutStyle = useMemo3(
+    () => ({
+      display: "grid",
+      gridTemplateColumns: mode === "form" ? "360px 1fr" : "1fr 1fr",
+      gap: "12px",
+      height,
+      width: "100%"
+    }),
+    [height, mode]
+  );
+  return /* @__PURE__ */ jsx5(
+    PlaygroundProvider,
+    {
+      initialCode,
+      initialFiles,
+      entryFile,
+      plugins,
+      dependencies,
+      formValue,
+      onFormValueChange,
+      children: /* @__PURE__ */ jsxs4("div", { style: layoutStyle, children: [
+        mode === "form" ? renderForm ? renderForm({ value: formValue, onChange: onFormValueChange }) : /* @__PURE__ */ jsx5(FormPlaceholder, {}) : /* @__PURE__ */ jsx5(
+          PlaygroundEditor,
+          {
+            showFileTree,
+            fileTreeDefaultOpen,
+            fileTreeWidth
+          }
+        ),
+        /* @__PURE__ */ jsx5(PlaygroundRender, {})
+      ] })
+    }
+  );
+};
+var FormPlaceholder = () => {
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      style: {
+        border: "1px solid #e2e8f0",
+        borderRadius: 12,
+        padding: 12,
+        background: "#fff",
+        color: "#0f172a",
+        overflow: "auto"
+      },
+      children: [
+        /* @__PURE__ */ jsx5("div", { style: { fontWeight: 700, marginBottom: 6 }, children: "Form mode" }),
+        /* @__PURE__ */ jsxs4("div", { style: { fontSize: 13, color: "#475569", lineHeight: 1.5 }, children: [
+          "Provide ",
+          /* @__PURE__ */ jsx5("code", { children: "renderForm" }),
+          " to render your own form UI and pass values via ",
+          /* @__PURE__ */ jsx5("code", { children: "formValue" }),
+          "."
+        ] })
+      ]
+    }
+  );
+};
+export {
+  Playground,
+  PlaygroundEditor,
+  PlaygroundFileTree,
+  PlaygroundProvider,
+  PlaygroundRender,
+  bundleWithRollup,
+  compileUserCode,
+  compileVirtualFiles,
+  defaultSnippet,
+  usePlayground
+};
+//# sourceMappingURL=index.mjs.map