@vizhub/runtime 4.2.0 → 4.3.0

package/dist/{build-DnPT2Qew.js → build-BT6ouBQg.js}

@@ -1,14 +1,14 @@
-import { magicSandbox as I } from "magic-sandbox";
-import { isVizId as q, getFileText as D, generateVizId as H, fileCollectionToVizFiles as G, vizFilesToFileCollection as Y } from "@vizhub/viz-utils";
-import { transform as Q } from "sucrase";
-const ze = () => (Math.random() + "").slice(2);
-function k(e = {}) {
+import { magicSandbox as C } from "magic-sandbox";
+import { isVizId as G, getFileText as B, generateVizId as Y, fileCollectionToVizFiles as Q, vizFilesToFileCollection as X } from "@vizhub/viz-utils";
+import { transform as Z } from "sucrase";
+const We = () => (Math.random() + "").slice(2);
+function V(e = {}) {
   return {
     name: "sucrase",
     transform(t, n) {
       if (!n.match(/\.(?:js|[jt]sx)$/))
         return null;
-      const r = Q(t, {
+      const s = Z(t, {
         transforms: ["jsx", "typescript"],
         // For source maps
         filePath: n,
@@ -19,8 +19,8 @@ function k(e = {}) {
         ...e
       });
       return {
-        code: r.code,
-        map: r.sourceMap
+        code: s.code,
+        map: s.sourceMap
       };
     }
   };
@@ -29,40 +29,40 @@ const P = {
   dependencies: {},
   vizhub: {},
   license: "MIT"
-}, X = !1, j = (e) => {
+}, K = !1, $ = (e) => {
   const t = e["package.json"];
   try {
     const n = t ? JSON.parse(t) : P;
-    return X && console.log(
+    return K && console.log(
       "[packageJSON] pkg:",
       JSON.stringify(n, null, 2)
     ), n;
   } catch {
     return P;
   }
-}, M = (e) => j(e).dependencies || {}, F = (e) => (j(e).vizhub || {}).libraries || {}, L = ({ name: e, version: t }, n, r = "jsdelivr") => {
-  const o = n[e] && n[e].path || "";
-  return r === "jsdelivr" ? `https://cdn.jsdelivr.net/npm/${e}@${t}${o}` : `https://unpkg.com/${e}@${t}${o}`;
-}, Z = (e) => {
+}, L = (e) => $(e).dependencies || {}, z = (e) => ($(e).vizhub || {}).libraries || {}, F = ({ name: e, version: t }, n, s = "jsdelivr") => {
+  const r = n[e] && n[e].path || "";
+  return s === "jsdelivr" ? `https://cdn.jsdelivr.net/npm/${e}@${t}${r}` : `https://unpkg.com/${e}@${t}${r}`;
+}, ee = (e) => {
   const t = e?.vizhub?.libraries;
   return t ? Object.entries(t).reduce(
-    (n, [r, o]) => (o.global && (n[r] = o.global), n),
+    (n, [s, r]) => (r.global && (n[s] = r.global), n),
     {}
   ) : {};
-}, K = {
+}, te = {
   d3: "d3",
   react: "React",
   "react-dom": "ReactDOM"
-}, A = (e) => {
-  const t = Z(e);
+}, H = (e) => {
+  const t = ee(e);
   return {
-    ...K,
+    ...te,
     ...t
   };
-}, b = (e) => {
-  const [t, ...n] = e.split("/"), r = n.join("/");
-  return { vizId: t, fileName: r };
-}, ee = `var EOL = {},
+}, S = (e) => {
+  const [t, ...n] = e.split("/"), s = n.join("/");
+  return { vizId: t, fileName: s };
+}, ne = `var EOL = {},
   EOF = {},
   QUOTE = 34,
   NEWLINE = 10,
@@ -182,84 +182,84 @@ var tsv = dsv('	');
 
 var tsvParse = tsv.parse;
 
-export { csvParse, tsvParse };`, te = (e) => (
+export { csvParse, tsvParse };`, re = (e) => (
   // str.replace(/`/g, '\\`');
   e.replace(/\\/g, "\\\\").replace(/`/g, "\\`")
-), ne = () => ({
+), se = () => ({
   name: "transformDSV",
   // `id` here is of the form
   // `{vizId}/{fileName}`
   transform: async (e, t) => {
-    const { fileName: n } = b(t), r = n.endsWith(".csv"), o = n.endsWith(".tsv");
-    if (r || o)
+    const { fileName: n } = S(t), s = n.endsWith(".csv"), r = n.endsWith(".tsv");
+    if (s || r)
       return {
         code: `
-            ${ee}
-            const data = ${r ? "csvParse" : "tsvParse"}(\`${te(e)}\`);
+            ${ne}
+            const data = ${s ? "csvParse" : "tsvParse"}(\`${re(e)}\`);
             export default data;
           `,
         map: { mappings: "" }
       };
   }
-}), re = (e) => {
+}), oe = (e) => {
   const t = /^@([a-zA-Z0-9_-]+)\/([a-zA-Z0-9_-]+)$/, n = e.match(t);
   return n ? {
     userName: n[1],
     idOrSlug: n[2]
   } : null;
-}, se = ({
+}, ie = ({
   vizId: e,
   slugCache: t
 }) => ({
   name: "vizResolve",
-  resolveId: async (n, r) => {
-    if (n.startsWith("./") && !r?.startsWith("https://")) {
-      let s = n.substring(2);
-      if (!s.endsWith(".js") && !s.endsWith(".css") && !s.endsWith(".csv") && !s.endsWith(".svelte") && (s += ".js"), r) {
+  resolveId: async (n, s) => {
+    if (n.startsWith("./") && !s?.startsWith("https://")) {
+      let o = n.substring(2);
+      if (!o.endsWith(".js") && !o.endsWith(".css") && !o.endsWith(".csv") && !o.endsWith(".svelte") && (o += ".js"), s) {
         const {
           vizId: c,
           fileName: i
-        } = b(r), a = i.split("/").slice(0, -1).join("/"), d = a ? `${a}/${s}` : s;
-        return `${c}/${d}`;
+        } = S(s), a = i.split("/").slice(0, -1).join("/"), u = a ? `${a}/${o}` : o;
+        return `${c}/${u}`;
       }
-      return e + "/" + s;
+      return e + "/" + o;
     }
-    const o = re(n);
-    if (o) {
-      let s;
-      if (q(o.idOrSlug))
-        s = o.idOrSlug;
+    const r = oe(n);
+    if (r) {
+      let o;
+      if (G(r.idOrSlug))
+        o = r.idOrSlug;
       else {
         if (!t)
           throw new Error(
             "slugCache is required to import by slug in v3 runtime"
           );
-        s = await t.get(
-          `${o.userName}/${o.idOrSlug}`
+        o = await t.get(
+          `${r.userName}/${r.idOrSlug}`
         );
       }
-      return s + "/index.js";
+      return o + "/index.js";
     }
   }
-}), oe = ({
+}), ce = ({
   vizCache: e,
   trackCSSImport: t,
   vizId: n,
-  files: r
+  files: s
 }) => ({
   name: "vizLoad",
   // `id` here is of the form
   // `{vizId}/{fileName}`
-  load: async (o) => {
-    const s = b(o), c = s.vizId, i = s.fileName;
+  load: async (r) => {
+    const o = S(r), c = o.vizId, i = o.fileName;
     if (i.endsWith(".css"))
-      return t(o), "";
+      return t(r), "";
     let a = null;
-    if (c === n && r)
-      a = r[i] || null;
+    if (c === n && s)
+      a = s[i] || null;
     else {
-      const d = await e.get(c);
-      a = D(d, i);
+      const u = await e.get(c);
+      a = B(u, i);
     }
     if (a === null)
       throw new Error(
@@ -267,46 +267,77 @@ export { csvParse, tsvParse };`, te = (e) => (
       );
     return a;
   }
-}), z = /* @__PURE__ */ new Map();
-let C;
-const E = "https://cdn.jsdelivr.net/npm/svelte@5", Ue = `${E}/compiler.cjs`, ie = ({
+}), J = /* @__PURE__ */ new Map(), R = /* @__PURE__ */ new Map();
+let I;
+const E = "https://cdn.jsdelivr.net/npm/svelte@5.37.1", De = `${E}/compiler/index.js`;
+async function W(e) {
+  const t = R.get(e);
+  if (t)
+    return t;
+  const n = [".js", "/index.js"];
+  for (const r of n) {
+    const o = `${e}${r}`;
+    try {
+      if ((await fetch(o, { method: "HEAD" })).ok)
+        return R.set(e, o), o;
+    } catch {
+      continue;
+    }
+  }
+  const s = `${e}.js`;
+  return R.set(e, s), s;
+}
+const ae = ({
   getSvelteCompiler: e
 }) => ({
   name: "transformSvelte",
   load: async (t) => {
+    if (t === "virtual:esm-env")
+      return `
+export const BROWSER = true;
+export const DEV = true;
+export const NODE = false;
+export const PROD = false;
+`;
     if (!t.startsWith(E))
       return;
-    const n = z.get(t);
+    const n = J.get(t);
     if (n) return n;
-    const r = await fetch(t).then(
-      (o) => o.text()
+    const s = await fetch(t).then(
+      (r) => r.text()
     );
-    return z.set(t, r), r;
+    return J.set(t, s), s;
   },
   // From https://github.com/sveltejs/sites/blob/master/packages/repl/src/lib/workers/bundler/index.js#L255C2-L271C5
   resolveId: async (t, n) => {
+    if (t === "esm-env")
+      return "virtual:esm-env";
     if (t === "svelte")
-      return `${E}/src/runtime/index.js`;
+      return `${E}/src/index-client.js`;
     if (t.startsWith("svelte/")) {
-      const r = t.slice(7);
-      return `${E}/src/runtime/${r}/index.js`;
+      const s = t.slice(7), r = `${E}/src/${s}`;
+      return await W(r);
+    }
+    if (t.startsWith("#client/")) {
+      const s = t.slice(8), r = `${E}/src/internal/client/${s}`;
+      return await W(r);
     }
     if (/^https?:/.test(t)) return t;
     if (t.startsWith(".") && n && n.startsWith(E)) {
-      const r = new URL(t, n).href;
-      return new URL(t, n).href, r;
+      const s = new URL(t, n).href;
+      return new URL(t, n).href, s;
     }
   },
   transform: async (t, n) => {
-    const { fileName: r } = b(n);
-    if (r.endsWith(".svelte")) {
-      if (!C) {
+    const { fileName: s } = S(n);
+    if (s.endsWith(".svelte")) {
+      if (!I) {
         if (!e)
           throw new Error("Svelte compiler not available");
-        C = await e();
+        I = await e();
       }
-      const s = C(t, {
-        filename: r,
+      const o = I(t, {
+        filename: s,
         generate: "client",
         // Svelte 5 uses 'client' instead of 'dom'
         css: "external",
@@ -314,91 +345,104 @@ const E = "https://cdn.jsdelivr.net/npm/svelte@5", Ue = `${E}/compiler.cjs`, ie
         dev: !1
         // Production mode
       });
-      let c = s.js.code;
-      return s.css && s.css.code && (c = `
+      let c = o.js.code;
+      return o.css && o.css.code && (c = `
 // Auto-inject CSS for Svelte component
 (function() {
   if (typeof document !== 'undefined') {
     const style = document.createElement('style');
-    style.textContent = ${JSON.stringify(s.css.code)};
+    style.textContent = ${JSON.stringify(o.css.code)};
     document.head.appendChild(style);
   }
 })();
 ` + c), c;
     }
   }
-}), ce = async ({
+}), de = async ({
   files: e,
   rollup: t,
   enableSourcemap: n = !0,
-  vizCache: r,
-  vizId: o,
-  slugCache: s,
+  vizCache: s,
+  vizId: r,
+  slugCache: o,
   getSvelteCompiler: c
 }) => {
-  const i = /* @__PURE__ */ new Set(), a = (u) => {
-    i.add(u);
+  const i = /* @__PURE__ */ new Set(), a = (p) => {
+    i.add(p);
   };
   if (!e["index.js"])
     throw new Error("Missing index.js");
-  const l = {
+  const d = {
+    name: "replace",
+    transform(p, w) {
+      let y = !1, f = p;
+      return f.includes("process.env.NODE_ENV") && (f = f.replace(
+        /\bprocess\.env\.NODE_ENV\b/g,
+        JSON.stringify("production")
+      ), y = !0), y ? { code: f, map: null } : null;
+    }
+  }, l = {
     input: "./index.js",
     plugins: [
-      ...o ? [se({ vizId: o, slugCache: s })] : [],
-      ne(),
-      k(),
-      ie({ getSvelteCompiler: c }),
-      ...r ? [
-        oe({
-          vizCache: r,
+      ...r ? [ie({ vizId: r, slugCache: o })] : [],
+      se(),
+      V(),
+      ae({ getSvelteCompiler: c }),
+      d,
+      ...s ? [
+        ce({
+          vizCache: s,
           trackCSSImport: a,
-          vizId: o,
+          vizId: r,
           files: e
         })
       ] : []
     ],
-    onwarn(u, g) {
-      u.code !== "UNRESOLVED_IMPORT" && g(u);
+    onwarn(p, w) {
+      p.code !== "UNRESOLVED_IMPORT" && w(p);
     }
-  }, p = {
+  }, m = {
     format: "umd",
     name: "Viz",
     sourcemap: !!n,
     compact: !0
-  }, m = j(e);
-  if (m) {
-    const u = A(m);
-    u && (l.external = Object.keys(u), p.globals = u);
+  }, g = $(e);
+  if (g) {
+    const p = H(g);
+    p && (l.external = Object.keys(p), m.globals = p);
   }
-  const y = await t(l), { output: h } = await y.generate(p);
+  l.external || (l.external = []), m.globals || (m.globals = {}), Array.isArray(l.external) && (l.external = l.external.filter(
+    (p) => typeof p == "string" && !p.startsWith("#client/")
+  ));
+  const v = await t(l), { output: b } = await v.generate(m);
   return {
-    src: h[0].code,
+    src: b[0].code,
     cssFiles: Array.from(i)
   };
-}, ae = (e) => {
+}, le = (e) => {
   if (e instanceof Error) {
     const t = e.stack || "", n = e.message || "Unknown error";
     return `${e.name || "Error"}: ${n}
 ${t}`;
   } else if ("error" in e && e.error instanceof Error) {
-    const t = e.error, n = t.stack || "", r = t.message || "Unknown error", o = "filename" in e ? e.filename : "", s = "lineno" in e ? e.lineno : "", c = "colno" in e ? e.colno : "";
+    const t = e.error, n = t.stack || "", s = t.message || "Unknown error", r = "filename" in e ? e.filename : "", o = "lineno" in e ? e.lineno : "", c = "colno" in e ? e.colno : "";
     let i = "";
-    return o && s && (i = ` at ${o}:${s}`, c && (i += `:${c}`)), `${t.name || "Error"}: ${r}${i}
+    return r && o && (i = ` at ${r}:${o}`, c && (i += `:${c}`)), `${t.name || "Error"}: ${s}${i}
 ${n}`;
   } else if ("reason" in e) {
     const t = e.reason;
     if (t instanceof Error) {
-      const n = t.stack || "", r = t.message || "Unknown error";
-      return `Unhandled Promise Rejection - ${t.name || "Error"}: ${r}
+      const n = t.stack || "", s = t.message || "Unknown error";
+      return `Unhandled Promise Rejection - ${t.name || "Error"}: ${s}
 ${n}`;
     } else
       return `Unhandled Promise Rejection: ${String(t)}`;
   } else
     return `Unknown runtime error: ${String(e)}`;
-}, S = () => `
+}, j = () => `
     // Global error handling for runtime errors
     (() => {
-      const formatRuntimeError = ${ae.toString()};
+      const formatRuntimeError = ${le.toString()};
       
       // Handle uncaught JavaScript errors
       window.addEventListener('error', (event) => {
@@ -419,15 +463,15 @@ ${n}`;
       });
     })();
   `;
-function de() {
+function ue() {
   return Math.random().toString().slice(2, 7);
 }
-const le = ({
+const pe = ({
   cdn: e,
   src: t,
   styles: n
 }) => {
-  const o = `viz-container-${de()}`;
+  const r = `viz-container-${ue()}`;
   return `<!DOCTYPE html>
 <html>
 <head>
@@ -437,22 +481,22 @@ const le = ({
       margin: 0;
       overflow: hidden;
     }
-    #${o} {
+    #${r} {
       height: 100vh;
     }
   </style>
 </head>
 <body>
-  <div id="${o}"></div>
-  <script>${S()}<\/script>
+  <div id="${r}"></div>
+  <script>${j()}<\/script>
   <script id="injected-script">${t}<\/script>
   <script>
     (() => {
       let cleanup;
       const render = () => {
-        const container = document.getElementById('${o}');
+        const container = document.getElementById('${r}');
         typeof cleanup === 'function' && cleanup();
-        cleanup = Viz.main(container, { state: window.state, setState, writeFile });
+        cleanup = (Viz.viz || Viz.main)(container, { state: window.state, setState, writeFile });
       };
       const setState = (next) => {
         window.state = next(window.state);
@@ -508,62 +552,62 @@ const le = ({
   <\/script>
 </body>
 </html>`;
-}, ue = async ({
+}, me = async ({
   files: e,
   rollup: t,
   enableSourcemap: n = !0,
-  vizCache: r,
-  vizId: o,
-  slugCache: s,
+  vizCache: s,
+  vizId: r,
+  slugCache: o,
   getSvelteCompiler: c
 }) => {
-  const { src: i, cssFiles: a } = await ce({
+  const { src: i, cssFiles: a } = await de({
     files: e,
     rollup: t,
     enableSourcemap: n,
-    vizCache: r,
-    vizId: o,
-    slugCache: s,
+    vizCache: s,
+    vizId: r,
+    slugCache: o,
     getSvelteCompiler: c
   });
-  let d = [];
+  let u = [];
   if (a.length > 0)
-    for (let h = 0; h < a.length; h++) {
-      const u = a[h], g = b(u), x = g.vizId, $ = g.fileName;
-      let v = null;
-      if (x === o && e)
-        v = e[$] || null;
+    for (let v = 0; v < a.length; v++) {
+      const b = a[v], p = S(b), w = p.vizId, y = p.fileName;
+      let f = null;
+      if (w === r && e)
+        f = e[y] || null;
       else {
-        const _ = await r.get(x);
-        v = D(_, $);
+        const q = await s.get(w);
+        f = B(q, y);
       }
-      v && d.push(v);
+      f && u.push(f);
     }
-  const l = d.join(`
-`), p = `
-    <style id="injected-style">${l}</style>`;
+  const d = u.join(`
+`), l = `
+    <style id="injected-style">${d}</style>`;
   let m = "";
-  const y = Object.entries(
-    M(e)
+  const g = Object.entries(
+    L(e)
   );
-  if (y.length > 0) {
-    const h = F(e);
-    m = y.map(([u, g], x) => {
-      const $ = L(
-        { name: u, version: g },
-        h
+  if (g.length > 0) {
+    const v = z(e);
+    m = g.map(([b, p], w) => {
+      const y = F(
+        { name: b, version: p },
+        v
       );
-      return `${x > 0 ? "    " : `
-    `}<script src="${$}"><\/script>`;
+      return `${w > 0 ? "    " : `
+    `}<script src="${y}"><\/script>`;
     }).join("");
   }
   return {
-    html: le({ cdn: m, src: i, styles: p }),
-    css: l,
+    html: pe({ cdn: m, src: i, styles: l }),
+    css: d,
     js: i,
     runtimeVersion: "v3"
   };
-}, pe = ({
+}, fe = ({
   initialContents: e,
   handleCacheMiss: t
 }) => {
@@ -589,59 +633,59 @@ const le = ({
   }, invalidate: (c) => {
     n.delete(c);
   } };
-}, Ve = ({
+}, Ue = ({
   initialMappings: e = {},
   handleCacheMiss: t
-}) => ({ get: async (s) => {
-  const c = e[s];
+}) => ({ get: async (o) => {
+  const c = e[o];
   if (c !== void 0)
     return c;
   if (!t)
     throw new Error(
-      `Unresolved slug ${s}, cache miss handler not provided.`
+      `Unresolved slug ${o}, cache miss handler not provided.`
     );
-  const i = await t(s);
+  const i = await t(o);
   if (i)
-    return e[s] = i, i;
-  throw new Error(`Unresolved slug ${s}`);
-}, set: (s, c) => {
-  e[s] = c;
-}, invalidate: (s) => {
-  delete e[s];
-} }), me = (e, t = "Sample Content for Exporting", n = H()) => ({
+    return e[o] = i, i;
+  throw new Error(`Unresolved slug ${o}`);
+}, set: (o, c) => {
+  e[o] = c;
+}, invalidate: (o) => {
+  delete e[o];
+} }), he = (e, t = "Sample Content for Exporting", n = Y()) => ({
   id: n,
-  files: G(e),
+  files: Q(e),
   title: t
-}), fe = (e) => {
+}), ge = (e) => {
   if (Object.keys(e).length === 0)
     return null;
-  const t = "index.html" in e, n = "index.js" in e, r = "index.jsx" in e;
-  return t ? e["index.html"].includes('type="module"') ? "v4" : n || r ? "v2" : "v1" : !t && n ? "v3" : null;
-}, R = (e, t) => new RegExp(`<${t}\\b`, "i").test(e) && new RegExp(`</${t}>`, "i").test(e), he = (e) => {
+  const t = "index.html" in e, n = "index.js" in e, s = "index.jsx" in e;
+  return t ? e["index.html"].includes('type="module"') ? "v4" : n || s ? "v2" : "v1" : !t && n ? "v3" : null;
+}, O = (e, t) => new RegExp(`<${t}\\b`, "i").test(e) && new RegExp(`</${t}>`, "i").test(e), ve = (e) => {
   const t = e.trim();
-  return R(t, "html") && R(t, "head") && R(t, "body") ? t : `<html><head></head><body>${t}</body></html>`;
-}, ge = (e, t) => e.replace(
+  return O(t, "html") && O(t, "head") && O(t, "body") ? t : `<html><head></head><body>${t}</body></html>`;
+}, we = (e, t) => e.replace(
   new RegExp(
     `<script[^>]*src=["'][^"']*${t.source}[^"']*["'][^>]*>\\s*<\/script>`,
     "gi"
   ),
   ""
-), O = (e, t, n) => e.replace(
+), N = (e, t, n) => e.replace(
   new RegExp(t, "i"),
   `${n}${t}`
-), ve = (e, t) => {
-  let n = he(e);
-  const r = Object.entries(M(t));
-  if (r.length) {
-    const c = F(t);
-    r.forEach(([a]) => {
-      n = ge(n, new RegExp(`${a}@`));
+), ye = (e, t) => {
+  let n = ve(e);
+  const s = Object.entries(L(t));
+  if (s.length) {
+    const c = z(t);
+    s.forEach(([a]) => {
+      n = we(n, new RegExp(`${a}@`));
     });
-    const i = r.map(
-      ([a, d]) => L({ name: a, version: d }, c)
+    const i = s.map(
+      ([a, u]) => F({ name: a, version: u }, c)
     ).map((a) => `<script src="${a}"><\/script>`).join(`
 `);
-    n = O(
+    n = N(
       n,
       "</head>",
       i + `
@@ -651,25 +695,29 @@ const le = ({
   if (t["bundle.js"] !== void 0 || t["index.js"] !== void 0) {
     const c = '<script src="bundle.js"><\/script>', i = /<script\b[^>]*\bsrc=["']bundle\.js["'][^>]*>\s*<\/script>/gi, a = [...n.matchAll(i)];
     a.length === 1 && (() => {
-      const l = a[0].index ?? -1;
-      if (l === -1) return !1;
-      const p = n.search(/<body\b[^>]*>/i), m = n.search(/<\/body>/i);
-      return p !== -1 && m !== -1 && l > p && l < m;
-    })() || (n = n.replace(i, ""), n = O(n, "</body>", c));
+      const d = a[0].index ?? -1;
+      if (d === -1) return !1;
+      const l = n.search(/<body\b[^>]*>/i), m = n.search(/<\/body>/i);
+      return l !== -1 && m !== -1 && d > l && d < m;
+    })() || (n = n.replace(i, ""), n = N(n, "</body>", c));
   }
-  const s = `<script>${S()}<\/script>
+  const o = `<script>${j()}<\/script>
 `;
-  return n = O(n, "</head>", s), /^\s*<!DOCTYPE/i.test(n) ? n : `<!DOCTYPE html>${n}`;
-}, we = (e) => {
+  return n = N(
+    n,
+    "</head>",
+    o
+  ), /^\s*<!DOCTYPE/i.test(n) ? n : `<!DOCTYPE html>${n}`;
+}, Ee = (e) => {
   const t = e["index.html"];
-  return !t && !e["index.js"] && !e["bundle.js"] ? "" : ve(t || "<!DOCTYPE html><html><head></head><body></body></html>", e);
+  return !t && !e["index.js"] && !e["bundle.js"] ? "" : ye(t || "<!DOCTYPE html><html><head></head><body></body></html>", e);
 };
-function Ee(e) {
+function be(e) {
   return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
 }
-var N, U;
-function be() {
-  return U || (U = 1, N = {
+var k, D;
+function xe() {
+  return D || (D = 1, k = {
     d3: "d3",
     "d3-array": "d3",
     "d3-axis": "d3",
@@ -717,100 +765,100 @@ function be() {
     "vizhub-vega-lite-config": "vizhubVegaLiteConfig",
     semiotic: "Semiotic",
     "viz.js": "Viz"
-  }), N;
+  }), k;
 }
-var ye = be();
-const xe = /* @__PURE__ */ Ee(ye), f = "\0virtual:", V = (e) => {
+var Se = xe();
+const $e = /* @__PURE__ */ be(Se), h = "\0virtual:", U = (e) => {
   let t = e.replace(/^\.\//, "");
   return t = t.replace(/\/+/g, "/"), t = t.replace(/\/$/, ""), t;
-}, $e = (e, t) => {
-  const n = e.includes("/") ? e.slice(0, e.lastIndexOf("/")) : "", r = t.split("/"), o = n ? n.split("/") : [];
-  for (const s of r)
-    s === ".." ? o.pop() : s !== "." && s !== "" && o.push(s);
-  return o.join("/");
-}, B = (e) => ({
+}, je = (e, t) => {
+  const n = e.includes("/") ? e.slice(0, e.lastIndexOf("/")) : "", s = t.split("/"), r = n ? n.split("/") : [];
+  for (const o of s)
+    o === ".." ? r.pop() : o !== "." && o !== "" && r.push(o);
+  return r.join("/");
+}, _ = (e) => ({
   name: "virtual-file-system",
   resolveId(t, n) {
-    const r = n?.startsWith(
-      f
-    ) ? n.slice(f.length) : n;
+    const s = n?.startsWith(
+      h
+    ) ? n.slice(h.length) : n;
     if (t.startsWith("./") || t.startsWith("../")) {
-      const s = V(r ? $e(r, t) : t);
-      if (e[s])
-        return f + s;
+      const o = U(s ? je(s, t) : t);
+      if (e[o])
+        return h + o;
       const c = [".js", ".jsx", ".ts", ".tsx"];
       for (const i of c) {
-        const a = s + i;
+        const a = o + i;
         if (e[a])
-          return f + a;
+          return h + a;
       }
     }
     if (e[t])
-      return f + t;
-    const o = [".js", ".jsx", ".ts", ".tsx"];
-    for (const s of o) {
-      const c = t + s;
+      return h + t;
+    const r = [".js", ".jsx", ".ts", ".tsx"];
+    for (const o of r) {
+      const c = t + o;
       if (e[c])
-        return f + c;
+        return h + c;
     }
     return null;
   },
   load(t) {
-    if (t.startsWith(f)) {
-      const n = t.slice(f.length);
+    if (t.startsWith(h)) {
+      const n = t.slice(h.length);
       if (e[n])
         return e[n];
     }
     return null;
   }
-}), je = async ({
+}), Ce = async ({
   files: e,
   rollup: t,
   enableSourcemap: n = !0
 }) => {
-  let r = "index.js";
-  if (!e[r] && (r = "index.jsx", !e[r]))
+  let s = "index.js";
+  if (!e[s] && (s = "index.jsx", !e[s]))
     throw new Error(
       "Missing entry point, can't find index.js or index.jsx"
     );
-  const s = {
-    input: "./" + r,
-    plugins: [B(e), k()],
-    onwarn(l, p) {
-      l.code !== "UNRESOLVED_IMPORT" && p(l);
+  const o = {
+    input: "./" + s,
+    plugins: [_(e), V()],
+    onwarn(d, l) {
+      d.code !== "UNRESOLVED_IMPORT" && l(d);
     }
   }, c = {
     format: "iife",
     sourcemap: n
-  }, i = j(e);
+  }, i = $(e);
   if (i) {
-    const l = {
+    const d = {
       // Pre-configured globals for v2 only
-      ...xe,
+      ...$e,
       // Libraries from package.json
-      ...A(i)
+      ...H(i)
     };
-    l && (s.external = Object.keys(l), c.globals = l);
+    d && (o.external = Object.keys(d), c.globals = d);
   }
-  const a = await t(s), { output: d } = await a.generate(c);
-  return d[0].code;
-}, Se = async ({
+  const a = await t(o), { output: u } = await a.generate(c);
+  return u[0].code;
+}, Re = async ({
   files: e,
   rollup: t,
   enableSourcemap: n
 }) => ({
   ...e,
-  "bundle.js": await je({
+  "bundle.js": await Ce({
     files: e,
     rollup: t,
     enableSourcemap: n
   }),
-  "index.html": we(e)
+  "index.html": Ee(e)
 }), Ie = (e) => {
-  const t = [], n = [], r = /<script\b([^>]*)>([\s\S]*?)<\/script>/gi;
-  let o, s = 0;
-  for (; (o = r.exec(e)) !== null; ) {
-    const c = o[1], i = o[2];
+  const t = [], n = [], s = /<script\b([^>]*)>([\s\S]*?)<\/script>/gi;
+  let r, o = 0;
+  for (; (r = s.exec(e)) !== null; ) {
+    const c = r[1], i = r[2];
     if (!/\btype\s*=\s*["']module["']/i.test(c))
       continue;
     const a = c.match(
@@ -819,36 +867,36 @@ const xe = /* @__PURE__ */ Ee(ye), f = "\0virtual:", V = (e) => {
     if (a)
       t.push(a[1]);
     else if (i.trim()) {
-      const d = `__inline_script_${s++}.js`;
+      const u = `__inline_script_${o++}.js`;
       n.push({
-        id: d,
+        id: u,
         content: i.trim()
-      }), t.push(d);
+      }), t.push(u);
     }
   }
   return { entryPoints: t, inlineScripts: n };
-}, Ce = () => ({
+}, Oe = () => ({
   name: "catch-all-prevent-fs",
   resolveId(e, t) {
     return { id: e, external: !0 };
   }
-}), Re = async ({
+}), Ne = async ({
   entryPoint: e,
   files: t,
   rollup: n,
-  enableSourcemap: r = !0
+  enableSourcemap: s = !0
 }) => {
-  const s = {
+  const o = {
     input: e.startsWith("./") ? e : `./${e}`,
     plugins: [
-      B(t),
-      k({
+      _(t),
+      V({
         // Enable JSX runtime
         // so we don't need to import React
         // in every file that uses JSX
         jsxRuntime: "automatic"
       }),
-      Ce()
+      Oe()
     ],
     // external: (source: string) => {
     //   DEBUG && console.log("external", source);
@@ -860,134 +908,222 @@ const xe = /* @__PURE__ */ Ee(ye), f = "\0virtual:", V = (e) => {
     //   DEBUG && console.log("isExternal", isExternal);
     //   return isExternal;
     // },
-    onwarn(a, d) {
+    onwarn(a, u) {
     }
-  }, c = await n(s), { output: i } = await c.generate({
+  }, c = await n(o), { output: i } = await c.generate({
     format: "es",
-    sourcemap: r
+    sourcemap: s
   });
   return i[0].code;
-}, T = (e, t) => new RegExp(`<${t}\\b`, "i").test(e) && new RegExp(`</${t}>`, "i").test(e), Oe = (e) => {
+}, T = (e, t) => new RegExp(`<${t}\\b`, "i").test(e) && new RegExp(`</${t}>`, "i").test(e), ke = (e) => {
   const t = e.trim();
   return T(t, "html") && T(t, "head") && T(t, "body") ? t : `<html><head></head><body>${t}</body></html>`;
-}, W = (e) => e.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), J = (e, t, n) => e.replace(
+}, A = (e) => e.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), M = (e, t, n) => e.replace(
   new RegExp(t, "i"),
   `${n}${t}`
-), Ne = (e) => {
-  const t = M(e);
+), Te = (e) => {
+  const t = L(e);
   if (Object.keys(t).length === 0) return null;
-  const n = F(e), r = {};
-  for (const [o, s] of Object.entries(t))
-    r[o] = L(
-      { name: o, version: s },
+  const n = z(e), s = {};
+  for (const [r, o] of Object.entries(t))
+    s[r] = F(
+      { name: r, version: o },
       n
     );
-  return JSON.stringify({ imports: r }, null, 2);
-}, Te = (e, t, n = []) => {
+  return JSON.stringify({ imports: s }, null, 2);
+}, Me = () => `
+    // V4 Hot Reloading Support
+    (() => {
+      const runJS = (js) => {
+        // Remove all existing bundled module scripts
+        const existingScripts = document.querySelectorAll('script[type="module"]');
+        existingScripts.forEach(script => {
+          // Only remove scripts that contain bundled code (not import maps or external scripts)
+          if (script.textContent && script.textContent.trim()) {
+            script.remove();
+          }
+        });
+        
+        // Create new script with updated bundled code
+        const script = document.createElement('script');
+        script.type = 'module';
+        script.textContent = js;
+        document.body.appendChild(script);
+      };
+      
+      const runCSS = (css) => {
+        let style = document.getElementById('v4-injected-style');
+        if (!style) {
+          style = document.createElement('style');
+          style.type = 'text/css';
+          style.id = 'v4-injected-style';
+          document.head.appendChild(style);
+        }
+        style.textContent = css;
+      };
+      
+      // Listen for hot reload messages
+      window.addEventListener('message', (message) => {
+        switch (message.data.type) {
+          case 'runJS':
+            try {
+              runJS(message.data.js);
+              parent.postMessage({ type: 'runDone' }, "*");
+            } catch (error) {
+              console.error('V4 Hot reload error:', error);
+              parent.postMessage({ type: 'runError', error }, "*");
+            }
+            break;
+          case 'runCSS':
+            runCSS(message.data.css);
+            break;
+          case 'ping':
+            parent.postMessage({ type: 'pong' }, "*");
+            break;
+          default:
+            break;
+        }
+      });
+    })();
+  `, Ve = (e, t, n = [], s = !1) => {
   if (!e["index.html"]) return "";
-  let r = Oe(e["index.html"]);
-  t.forEach((c, i) => {
-    if (n.some((d) => d.id === i)) {
-      const d = n.find((m) => m.id === i)?.content || "", l = W(d), p = new RegExp(
+  let r = ke(e["index.html"]);
+  t.forEach((i, a) => {
+    if (n.some(
+      (d) => d.id === a
+    )) {
+      const d = n.find((g) => g.id === a)?.content || "", l = A(
+        d
+      ), m = new RegExp(
         `<script\\b[^>]*\\btype=["']module["'][^>]*>\\s*${l}\\s*<\/script>`,
         "gi"
       );
       r = r.replace(
-        p,
+        m,
         `<script type="module">
-${c}
+${i}
 <\/script>`
       );
     } else {
       const d = new RegExp(
-        `<script\\b[^>]*\\bsrc=["']${W(i)}["'][^>]*>[^<]*<\/script>`,
+        `<script\\b[^>]*\\bsrc=["']${A(a)}["'][^>]*>[^<]*<\/script>`,
         "gi"
       );
       r = r.replace(
         d,
         `<script type="module">
-${c}
+${i}
 <\/script>`
       );
     }
   });
-  const o = Ne(e);
+  const o = Te(e);
   if (o && !/<script\b[^>]*type=["']importmap["'][^>]*>/i.test(
     r
   )) {
-    const i = `<script type="importmap">
+    const a = `<script type="importmap">
 ${o}
 <\/script>
 `;
-    r = J(
+    r = M(
       r,
       "</head>",
-      i
+      a
     );
   }
-  const s = `<script>${S()}<\/script>
+  const c = `<script>${j()}<\/script>
 `;
-  return r = J(r, "</head>", s), /^\s*<!DOCTYPE/i.test(r) ? r : `<!DOCTYPE html>${r}`;
-}, ke = async ({
+  if (r = M(
+    r,
+    "</head>",
+    c
+  ), s) {
+    const i = `<script>${Me()}<\/script>
+`;
+    r = M(
+      r,
+      "</body>",
+      i
+    );
+  }
+  return /^\s*<!DOCTYPE/i.test(r) ? r : `<!DOCTYPE html>${r}`;
+}, Le = async ({
   files: e,
   rollup: t,
   enableSourcemap: n = !0
 }) => {
-  const r = e["index.html"] || "", { entryPoints: o, inlineScripts: s } = Ie(r);
-  if (o.length === 0)
-    return e;
+  const s = e["index.html"] || "", { entryPoints: r, inlineScripts: o } = Ie(s);
+  if (r.length === 0)
+    return { files: e, bundledJS: "" };
   const c = { ...e };
-  for (const d of s)
-    c[d.id] = d.content;
-  const i = /* @__PURE__ */ new Map();
-  for (const d of o) {
-    const l = await Re({
-      entryPoint: d,
+  for (const l of o)
+    c[l.id] = l.content;
+  const i = /* @__PURE__ */ new Map(), a = [];
+  for (const l of r) {
+    const m = await Ne({
+      entryPoint: l,
       files: c,
       rollup: t,
       enableSourcemap: n
     });
-    i.set(d, l);
+    i.set(l, m), a.push(m);
   }
-  const a = Te(c, i, s);
+  const u = Ve(
+    c,
+    i,
+    o,
+    !0
+  ), d = a.join(`
+`);
   return {
-    ...e,
-    "index.html": a
+    files: {
+      ...e,
+      "index.html": u
+    },
+    bundledJS: d
   };
-}, w = !1, Me = (e) => {
-  const t = `<script>${S()}<\/script>`;
-  return e.includes("</head>") ? e.replace("</head>", `${t}
-</head>`) : e.includes("</body>") ? e.replace("</body>", `${t}
-</body>`) : e + t;
-}, We = async ({
+}, x = !1, ze = (e) => {
+  const t = `<script>${j()}<\/script>`;
+  return e.includes("</head>") ? e.replace(
+    "</head>",
+    `${t}
+</head>`
+  ) : e.includes("</body>") ? e.replace(
+    "</body>",
+    `${t}
+</body>`
+  ) : e + t;
+}, Ae = async ({
   files: e,
   rollup: t,
   enableSourcemap: n = !0,
-  vizCache: r,
-  vizId: o,
-  slugCache: s,
+  vizCache: s,
+  vizId: r,
+  slugCache: o,
   getSvelteCompiler: c
 }) => {
   try {
-    if (w && console.log(
+    if (x && console.log(
       "[build] files:",
       e ? JSON.stringify(e).substring(0, 100) : void 0
-    ), w && console.log("[build] vizCache:", r), w && console.log("[build] vizId:", o), !e && !r)
+    ), x && console.log("[build] vizCache:", s), x && console.log("[build] vizId:", r), !e && !s)
       throw new Error(
         "Either files or vizCache is required"
       );
-    if (!e && r && !o)
+    if (!e && s && !r)
       throw new Error(
         "vizId is required when using vizCache"
       );
-    if (!e && r && o && (e = Y(
-      (await r.get(o))?.files
+    if (!e && s && r && (e = X(
+      (await s.get(r))?.files
     )), !e)
       throw new Error("Upable to extract viz files");
-    const i = fe(e);
-    if (w && console.log("[build] version:", i), i === "v1")
+    const i = ge(e);
+    if (x && console.log("[build] version:", i), i === "v1")
       return {
-        html: Me(I(e)),
+        html: ze(
+          C(e)
+        ),
         runtimeVersion: i
       };
     if (i === "v2") {
@@ -996,8 +1132,8 @@ ${o}
           "Rollup is required for v2 runtime"
         );
       return {
-        html: I(
-          await Se({ files: e, rollup: t, enableSourcemap: n })
+        html: C(
+          await Re({ files: e, rollup: t, enableSourcemap: n })
         ),
         runtimeVersion: i
       };
@@ -1007,9 +1143,9 @@ ${o}
         throw new Error(
           "Rollup is required for v3 runtime"
         );
-      if (!r && !o) {
-        const a = me(e);
-        o = a.id, r = pe({
+      if (!s && !r) {
+        const a = he(e);
+        r = a.id, s = fe({
           initialContents: [a],
           handleCacheMiss: async () => {
             throw new Error(
@@ -1018,20 +1154,20 @@ ${o}
           }
         });
       }
-      if (!r)
+      if (!s)
         throw new Error(
           "vizCache is required for v3 runtime"
         );
-      if (!o)
+      if (!r)
         throw new Error(
           "vizId is required for v3 runtime if vizCache is provided"
         );
-      return await ue({
+      return await me({
         files: e,
         rollup: t,
-        vizCache: r,
-        vizId: o,
-        slugCache: s,
+        vizCache: s,
+        vizId: r,
+        slugCache: o,
         getSvelteCompiler: c
       });
     }
@@ -1040,14 +1176,19 @@ ${o}
         throw new Error(
           "Rollup is required for v4 runtime"
         );
-      return w && console.log("[build] v4Build", {
+      x && console.log("[build] v4Build", {
         files: e,
         rollup: t,
         enableSourcemap: n
-      }), {
-        html: I(
-          await ke({ files: e, rollup: t, enableSourcemap: n })
-        ),
+      });
+      const a = await Le({
+        files: e,
+        rollup: t,
+        enableSourcemap: n
+      });
+      return {
+        html: C(a.files),
+        js: a.bundledJS,
         runtimeVersion: i
       };
     }
@@ -1055,21 +1196,21 @@ ${o}
       `Unsupported runtime version: ${i}`
     );
   } catch (i) {
-    throw i instanceof Error && i.message.indexOf(f) && (i.message = i.message.replace(
-      f,
+    throw i instanceof Error && i.message.indexOf(h) && (i.message = i.message.replace(
+      h,
       ""
     )), i;
   }
 };
 export {
-  pe as a,
-  We as b,
-  ce as c,
-  fe as d,
-  Ve as e,
-  me as f,
-  ze as g,
-  Ue as s,
-  ue as v
+  fe as a,
+  Ae as b,
+  de as c,
+  ge as d,
+  Ue as e,
+  he as f,
+  We as g,
+  De as s,
+  me as v
 };
-//# sourceMappingURL=build-DnPT2Qew.js.map
+//# sourceMappingURL=build-BT6ouBQg.js.map