@vizhub/runtime 4.2.0 → 4.4.0

package/dist/{build-DnPT2Qew.js → build-B7w6NcTo.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 X, getFileText as q, generateVizId as Z, fileCollectionToVizFiles as K, vizFilesToFileCollection as ee } from "@vizhub/viz-utils";
+import { transform as te } from "sucrase";
+const qe = () => (Math.random() + "").slice(2);
+function F(e = {}) {
   return {
     name: "sucrase",
     transform(t, n) {
       if (!n.match(/\.(?:js|[jt]sx)$/))
         return null;
-      const r = Q(t, {
+      const r = te(t, {
         transforms: ["jsx", "typescript"],
         // For source maps
         filePath: n,
@@ -25,44 +25,44 @@ function k(e = {}) {
     }
   };
 }
-const P = {
+const J = {
   dependencies: {},
   vizhub: {},
   license: "MIT"
-}, X = !1, j = (e) => {
+}, ne = !1, $ = (e) => {
   const t = e["package.json"];
   try {
-    const n = t ? JSON.parse(t) : P;
-    return X && console.log(
+    const n = t ? JSON.parse(t) : J;
+    return ne && console.log(
       "[packageJSON] pkg:",
       JSON.stringify(n, null, 2)
     ), n;
   } catch {
-    return P;
+    return J;
   }
-}, 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) => {
+}, W = (e) => $(e).dependencies || {}, V = (e) => ($(e).vizhub || {}).libraries || {}, U = ({ name: e, version: t }, n, r = "jsdelivr") => {
+  const s = n[e] && n[e].path || "";
+  return r === "jsdelivr" ? `https://cdn.jsdelivr.net/npm/${e}@${t}${s}` : `https://unpkg.com/${e}@${t}${s}`;
+}, re = (e) => {
   const t = e?.vizhub?.libraries;
   return t ? Object.entries(t).reduce(
-    (n, [r, o]) => (o.global && (n[r] = o.global), n),
+    (n, [r, s]) => (s.global && (n[r] = s.global), n),
     {}
   ) : {};
-}, K = {
+}, se = {
   d3: "d3",
   react: "React",
   "react-dom": "ReactDOM"
-}, A = (e) => {
-  const t = Z(e);
+}, G = (e) => {
+  const t = re(e);
   return {
-    ...K,
+    ...se,
     ...t
   };
-}, b = (e) => {
+}, S = (e) => {
   const [t, ...n] = e.split("/"), r = n.join("/");
   return { vizId: t, fileName: r };
-}, ee = `var EOL = {},
+}, oe = `var EOL = {},
   EOF = {},
   QUOTE = 34,
   NEWLINE = 10,
@@ -182,66 +182,113 @@ var tsv = dsv('	');
 
 var tsvParse = tsv.parse;
 
-export { csvParse, tsvParse };`, te = (e) => (
+export { csvParse, tsvParse };`, ie = (e) => (
   // str.replace(/`/g, '\\`');
   e.replace(/\\/g, "\\\\").replace(/`/g, "\\`")
-), ne = () => ({
+), ce = () => ({
   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), r = n.endsWith(".csv"), s = n.endsWith(".tsv");
+    if (r || s)
       return {
         code: `
-            ${ee}
-            const data = ${r ? "csvParse" : "tsvParse"}(\`${te(e)}\`);
+            ${oe}
+            const data = ${r ? "csvParse" : "tsvParse"}(\`${ie(e)}\`);
             export default data;
           `,
         map: { mappings: "" }
       };
   }
-}), re = (e) => {
+}), ae = (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 = ({
+}, de = ({
   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) {
+      let o = n.substring(2);
+      if (!o.endsWith(".js") && !o.endsWith(".css") && !o.endsWith(".csv") && !o.endsWith(".svelte") && !o.endsWith(".png") && !o.endsWith(".jpg") && !o.endsWith(".jpeg") && !o.endsWith(".gif") && !o.endsWith(".svg") && !o.endsWith(".webp") && !o.endsWith(".bmp") && (o += ".js"), r) {
         const {
           vizId: c,
           fileName: i
-        } = b(r), a = i.split("/").slice(0, -1).join("/"), d = a ? `${a}/${s}` : s;
+        } = S(r), a = i.split("/").slice(0, -1).join("/"), d = a ? `${a}/${o}` : o;
         return `${c}/${d}`;
       }
-      return e + "/" + s;
+      return e + "/" + o;
     }
-    const o = re(n);
-    if (o) {
-      let s;
-      if (q(o.idOrSlug))
-        s = o.idOrSlug;
+    const s = ae(n);
+    if (s) {
+      let o;
+      if (X(s.idOrSlug))
+        o = s.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(
+          `${s.userName}/${s.idOrSlug}`
         );
       }
-      return s + "/index.js";
+      return o + "/index.js";
     }
   }
-}), oe = ({
+}), le = [
+  ".jpg",
+  ".jpeg",
+  ".png",
+  ".gif",
+  ".svg",
+  ".webp",
+  ".bmp"
+], z = (e) => {
+  const t = e.toLowerCase().split(".").pop();
+  return t ? le.includes(`.${t}`) : !1;
+}, ue = (e) => {
+  switch (e.toLowerCase().split(".").pop()) {
+    case "jpg":
+    case "jpeg":
+      return "image/jpeg";
+    case "png":
+      return "image/png";
+    case "gif":
+      return "image/gif";
+    case "svg":
+      return "image/svg+xml";
+    case "webp":
+      return "image/webp";
+    case "bmp":
+      return "image/bmp";
+    default:
+      return "image/png";
+  }
+}, pe = (e) => {
+  const t = e.replace(/\s/g, "");
+  return /^[A-Za-z0-9+/]*={0,2}$/.test(t);
+}, P = (e, t) => {
+  const n = ue(e);
+  return e.toLowerCase().split(".").pop() === "svg" && !pe(t) ? `data:${n};utf8,${encodeURIComponent(t)}` : `data:${n};base64,${t}`;
+}, me = (e, t) => e.replace(
+  /<img([^>]*)\s+src=["']([^"']+)["']([^>]*)>/gi,
+  (n, r, s, o) => {
+    if (t[s] !== void 0 && z(s)) {
+      const c = P(
+        s,
+        t[s]
+      );
+      return `<img${r} src="${c}"${o}>`;
+    }
+    return n;
+  }
+), fe = ({
   vizCache: e,
   trackCSSImport: t,
   vizId: n,
@@ -250,62 +297,96 @@ export { csvParse, tsvParse };`, te = (e) => (
   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 (s) => {
+    const o = S(s), c = o.vizId, i = o.fileName;
     if (i.endsWith(".css"))
-      return t(o), "";
+      return t(s), "";
     let a = null;
     if (c === n && r)
       a = r[i] || null;
     else {
       const d = await e.get(c);
-      a = D(d, i);
+      a = q(d, i);
     }
     if (a === null)
       throw new Error(
         `Imported file "${i}" not found.`
       );
-    return a;
+    return z(i) ? `export default "${P(
+      i,
+      a
+    )}";` : a;
   }
-}), z = /* @__PURE__ */ new Map();
-let C;
-const E = "https://cdn.jsdelivr.net/npm/svelte@5", Ue = `${E}/compiler.cjs`, ie = ({
+}), D = /* @__PURE__ */ new Map(), R = /* @__PURE__ */ new Map();
+let I;
+const b = "https://cdn.jsdelivr.net/npm/svelte@5.37.1", Ge = `${b}/compiler/index.js`;
+async function A(e) {
+  const t = R.get(e);
+  if (t)
+    return t;
+  const n = [".js", "/index.js"];
+  for (const s of n) {
+    const o = `${e}${s}`;
+    try {
+      if ((await fetch(o, { method: "HEAD" })).ok)
+        return R.set(e, o), o;
+    } catch {
+      continue;
+    }
+  }
+  const r = `${e}.js`;
+  return R.set(e, r), r;
+}
+const he = ({
   getSvelteCompiler: e
 }) => ({
   name: "transformSvelte",
   load: async (t) => {
-    if (!t.startsWith(E))
+    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(b))
       return;
-    const n = z.get(t);
+    const n = D.get(t);
     if (n) return n;
     const r = await fetch(t).then(
-      (o) => o.text()
+      (s) => s.text()
     );
-    return z.set(t, r), r;
+    return D.set(t, r), r;
   },
   // 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 `${b}/src/index-client.js`;
     if (t.startsWith("svelte/")) {
-      const r = t.slice(7);
-      return `${E}/src/runtime/${r}/index.js`;
+      const r = t.slice(7), s = `${b}/src/${r}`;
+      return await A(s);
+    }
+    if (t.startsWith("#client/")) {
+      const r = t.slice(8), s = `${b}/src/internal/client/${r}`;
+      return await A(s);
     }
     if (/^https?:/.test(t)) return t;
-    if (t.startsWith(".") && n && n.startsWith(E)) {
+    if (t.startsWith(".") && n && n.startsWith(b)) {
       const r = new URL(t, n).href;
       return new URL(t, n).href, r;
     }
   },
   transform: async (t, n) => {
-    const { fileName: r } = b(n);
+    const { fileName: r } = S(n);
     if (r.endsWith(".svelte")) {
-      if (!C) {
+      if (!I) {
         if (!e)
           throw new Error("Svelte compiler not available");
-        C = await e();
+        I = await e();
       }
-      const s = C(t, {
+      const o = I(t, {
         filename: r,
         generate: "client",
         // Svelte 5 uses 'client' instead of 'dom'
@@ -314,76 +395,89 @@ 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 ({
+}), ge = async ({
   files: e,
   rollup: t,
   enableSourcemap: n = !0,
   vizCache: r,
-  vizId: o,
-  slugCache: s,
+  vizId: s,
+  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 = {
+    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;
+    }
+  }, u = {
     input: "./index.js",
     plugins: [
-      ...o ? [se({ vizId: o, slugCache: s })] : [],
-      ne(),
-      k(),
-      ie({ getSvelteCompiler: c }),
+      ...s ? [de({ vizId: s, slugCache: o })] : [],
+      ce(),
+      F(),
+      he({ getSvelteCompiler: c }),
+      l,
       ...r ? [
-        oe({
+        fe({
           vizCache: r,
           trackCSSImport: a,
-          vizId: o,
+          vizId: s,
           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 = G(g);
+    p && (u.external = Object.keys(p), m.globals = p);
   }
-  const y = await t(l), { output: h } = await y.generate(p);
+  u.external || (u.external = []), m.globals || (m.globals = {}), Array.isArray(u.external) && (u.external = u.external.filter(
+    (p) => typeof p == "string" && !p.startsWith("#client/")
+  ));
+  const v = await t(u), { output: E } = await v.generate(m);
   return {
-    src: h[0].code,
+    src: E[0].code,
     cssFiles: Array.from(i)
   };
-}, ae = (e) => {
+}, ve = (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 || "", r = t.message || "Unknown error", s = "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 s && o && (i = ` at ${s}:${o}`, c && (i += `:${c}`)), `${t.name || "Error"}: ${r}${i}
 ${n}`;
   } else if ("reason" in e) {
     const t = e.reason;
@@ -395,10 +489,10 @@ ${n}`;
       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 = ${ve.toString()};
       
       // Handle uncaught JavaScript errors
       window.addEventListener('error', (event) => {
@@ -419,15 +513,15 @@ ${n}`;
       });
     })();
   `;
-function de() {
+function we() {
   return Math.random().toString().slice(2, 7);
 }
-const le = ({
+const ye = ({
   cdn: e,
   src: t,
   styles: n
 }) => {
-  const o = `viz-container-${de()}`;
+  const s = `viz-container-${we()}`;
   return `<!DOCTYPE html>
 <html>
 <head>
@@ -437,22 +531,22 @@ const le = ({
       margin: 0;
       overflow: hidden;
     }
-    #${o} {
+    #${s} {
       height: 100vh;
     }
   </style>
 </head>
 <body>
-  <div id="${o}"></div>
-  <script>${S()}<\/script>
+  <div id="${s}"></div>
+  <script>${j()}<\/script>
   <script id="injected-script">${t}<\/script>
   <script>
     (() => {
       let cleanup;
       const render = () => {
-        const container = document.getElementById('${o}');
+        const container = document.getElementById('${s}');
         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 +602,62 @@ const le = ({
   <\/script>
 </body>
 </html>`;
-}, ue = async ({
+}, be = async ({
   files: e,
   rollup: t,
   enableSourcemap: n = !0,
   vizCache: r,
-  vizId: o,
-  slugCache: s,
+  vizId: s,
+  slugCache: o,
   getSvelteCompiler: c
 }) => {
-  const { src: i, cssFiles: a } = await ce({
+  const { src: i, cssFiles: a } = await ge({
     files: e,
     rollup: t,
     enableSourcemap: n,
     vizCache: r,
-    vizId: o,
-    slugCache: s,
+    vizId: s,
+    slugCache: o,
     getSvelteCompiler: c
   });
   let d = [];
   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 E = a[v], p = S(E), w = p.vizId, y = p.fileName;
+      let f = null;
+      if (w === s && e)
+        f = e[y] || null;
       else {
-        const _ = await r.get(x);
-        v = D(_, $);
+        const Q = await r.get(w);
+        f = q(Q, y);
       }
-      v && d.push(v);
+      f && d.push(f);
     }
   const l = d.join(`
-`), p = `
+`), u = `
     <style id="injected-style">${l}</style>`;
   let m = "";
-  const y = Object.entries(
-    M(e)
+  const g = Object.entries(
+    W(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 = V(e);
+    m = g.map(([E, p], w) => {
+      const y = U(
+        { name: E, 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 }),
+    html: ye({ cdn: m, src: i, styles: u }),
     css: l,
     js: i,
     runtimeVersion: "v3"
   };
-}, pe = ({
+}, Ee = ({
   initialContents: e,
   handleCacheMiss: t
 }) => {
@@ -589,59 +683,59 @@ const le = ({
   }, invalidate: (c) => {
     n.delete(c);
   } };
-}, Ve = ({
+}, Ye = ({
   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];
+} }), xe = (e, t = "Sample Content for Exporting", n = Z()) => ({
   id: n,
-  files: G(e),
+  files: K(e),
   title: t
-}), fe = (e) => {
+}), Se = (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) => {
+}, O = (e, t) => new RegExp(`<${t}\\b`, "i").test(e) && new RegExp(`</${t}>`, "i").test(e), $e = (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>`;
+}, je = (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));
+), Ce = (e, t) => {
+  let n = $e(e);
+  const r = Object.entries(W(t));
   if (r.length) {
-    const c = F(t);
+    const c = V(t);
     r.forEach(([a]) => {
-      n = ge(n, new RegExp(`${a}@`));
+      n = je(n, new RegExp(`${a}@`));
     });
     const i = r.map(
-      ([a, d]) => L({ name: a, version: d }, c)
+      ([a, d]) => U({ name: a, version: d }, c)
     ).map((a) => `<script src="${a}"><\/script>`).join(`
 `);
-    n = O(
+    n = N(
       n,
       "</head>",
       i + `
@@ -653,23 +747,27 @@ const le = ({
     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 u = n.search(/<body\b[^>]*>/i), m = n.search(/<\/body>/i);
+      return u !== -1 && m !== -1 && l > u && l < 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}`;
+}, Re = (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"] ? "" : Ce(t || "<!DOCTYPE html><html><head></head><body></body></html>", e);
 };
-function Ee(e) {
+function Ie(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 T, B;
+function Oe() {
+  return B || (B = 1, T = {
     d3: "d3",
     "d3-array": "d3",
     "d3-axis": "d3",
@@ -717,53 +815,56 @@ function be() {
     "vizhub-vega-lite-config": "vizhubVegaLiteConfig",
     semiotic: "Semiotic",
     "viz.js": "Viz"
-  }), N;
+  }), T;
 }
-var ye = be();
-const xe = /* @__PURE__ */ Ee(ye), f = "\0virtual:", V = (e) => {
+var Ne = Oe();
+const Te = /* @__PURE__ */ Ie(Ne), h = "\0virtual:", H = (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) => ({
+}, ke = (e, t) => {
+  const n = e.includes("/") ? e.slice(0, e.lastIndexOf("/")) : "", r = t.split("/"), s = n ? n.split("/") : [];
+  for (const o of r)
+    o === ".." ? s.pop() : o !== "." && o !== "" && s.push(o);
+  return s.join("/");
+}, Y = (e) => ({
   name: "virtual-file-system",
   resolveId(t, n) {
     const r = n?.startsWith(
-      f
-    ) ? n.slice(f.length) : n;
+      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 = H(r ? ke(r, 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 s = [".js", ".jsx", ".ts", ".tsx"];
+    for (const o of s) {
+      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 z(n) ? `export default "${P(
+          n,
+          e[n]
+        )}";` : e[n];
     }
     return null;
   }
-}), je = async ({
+}), Le = async ({
   files: e,
   rollup: t,
   enableSourcemap: n = !0
@@ -773,44 +874,44 @@ const xe = /* @__PURE__ */ Ee(ye), f = "\0virtual:", V = (e) => {
     throw new Error(
       "Missing entry point, can't find index.js or index.jsx"
     );
-  const s = {
+  const o = {
     input: "./" + r,
-    plugins: [B(e), k()],
-    onwarn(l, p) {
-      l.code !== "UNRESOLVED_IMPORT" && p(l);
+    plugins: [Y(e), F()],
+    onwarn(l, u) {
+      l.code !== "UNRESOLVED_IMPORT" && u(l);
     }
   }, c = {
     format: "iife",
     sourcemap: n
-  }, i = j(e);
+  }, i = $(e);
   if (i) {
     const l = {
       // Pre-configured globals for v2 only
-      ...xe,
+      ...Te,
       // Libraries from package.json
-      ...A(i)
+      ...G(i)
     };
-    l && (s.external = Object.keys(l), c.globals = l);
+    l && (o.external = Object.keys(l), c.globals = l);
   }
-  const a = await t(s), { output: d } = await a.generate(c);
+  const a = await t(o), { output: d } = await a.generate(c);
   return d[0].code;
-}, Se = async ({
+}, Me = async ({
   files: e,
   rollup: t,
   enableSourcemap: n
 }) => ({
   ...e,
-  "bundle.js": await je({
+  "bundle.js": await Le({
     files: e,
     rollup: t,
     enableSourcemap: n
   }),
-  "index.html": we(e)
-}), Ie = (e) => {
+  "index.html": Re(e)
+}), Fe = (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];
+  let s, o = 0;
+  for (; (s = r.exec(e)) !== null; ) {
+    const c = s[1], i = s[2];
     if (!/\btype\s*=\s*["']module["']/i.test(c))
       continue;
     const a = c.match(
@@ -819,7 +920,7 @@ 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 d = `__inline_script_${o++}.js`;
       n.push({
         id: d,
         content: i.trim()
@@ -827,28 +928,28 @@ const xe = /* @__PURE__ */ Ee(ye), f = "\0virtual:", V = (e) => {
     }
   }
   return { entryPoints: t, inlineScripts: n };
-}, Ce = () => ({
+}, We = () => ({
   name: "catch-all-prevent-fs",
   resolveId(e, t) {
     return { id: e, external: !0 };
   }
-}), Re = async ({
+}), Ve = async ({
   entryPoint: e,
   files: t,
   rollup: n,
   enableSourcemap: r = !0
 }) => {
-  const s = {
+  const o = {
     input: e.startsWith("./") ? e : `./${e}`,
     plugins: [
-      B(t),
-      k({
+      Y(t),
+      F({
         // Enable JSX runtime
         // so we don't need to import React
         // in every file that uses JSX
         jsxRuntime: "automatic"
       }),
-      Ce()
+      We()
     ],
     // external: (source: string) => {
     //   DEBUG && console.log("external", source);
@@ -862,143 +963,246 @@ const xe = /* @__PURE__ */ Ee(ye), f = "\0virtual:", V = (e) => {
     // },
     onwarn(a, d) {
     }
-  }, c = await n(s), { output: i } = await c.generate({
+  }, c = await n(o), { output: i } = await c.generate({
     format: "es",
     sourcemap: r
   });
   return i[0].code;
-}, T = (e, t) => new RegExp(`<${t}\\b`, "i").test(e) && new RegExp(`</${t}>`, "i").test(e), Oe = (e) => {
+}, k = (e, t) => new RegExp(`<${t}\\b`, "i").test(e) && new RegExp(`</${t}>`, "i").test(e), Ue = (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(
+  return k(t, "html") && k(t, "head") && k(t, "body") ? t : `<html><head></head><body>${t}</body></html>`;
+}, _ = (e) => e.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), L = (e, t, n) => e.replace(
   new RegExp(t, "i"),
   `${n}${t}`
-), Ne = (e) => {
-  const t = M(e);
+), ze = (e) => {
+  const t = W(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 = V(e), r = {};
+  for (const [s, o] of Object.entries(t))
+    r[s] = U(
+      { name: s, version: o },
       n
     );
   return JSON.stringify({ imports: r }, null, 2);
-}, Te = (e, t, n = []) => {
+}, Pe = () => `
+    // 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;
+        }
+      });
+    })();
+  `, Je = (e, t, n = [], r = !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(
-        `<script\\b[^>]*\\btype=["']module["'][^>]*>\\s*${l}\\s*<\/script>`,
+  let s = Ue(e["index.html"]);
+  t.forEach((i, a) => {
+    if (n.some(
+      (l) => l.id === a
+    )) {
+      const l = n.find((g) => g.id === a)?.content || "", u = _(
+        l
+      ), m = new RegExp(
+        `<script\\b[^>]*\\btype=["']module["'][^>]*>\\s*${u}\\s*<\/script>`,
         "gi"
       );
-      r = r.replace(
-        p,
+      s = s.replace(
+        m,
         `<script type="module">
-${c}
+${i}
 <\/script>`
       );
     } else {
-      const d = new RegExp(
-        `<script\\b[^>]*\\bsrc=["']${W(i)}["'][^>]*>[^<]*<\/script>`,
+      const l = new RegExp(
+        `<script\\b[^>]*\\bsrc=["']${_(a)}["'][^>]*>[^<]*<\/script>`,
         "gi"
       );
-      r = r.replace(
-        d,
+      s = s.replace(
+        l,
         `<script type="module">
-${c}
+${i}
 <\/script>`
       );
     }
   });
-  const o = Ne(e);
+  const o = ze(e);
   if (o && !/<script\b[^>]*type=["']importmap["'][^>]*>/i.test(
-    r
+    s
   )) {
-    const i = `<script type="importmap">
+    const a = `<script type="importmap">
 ${o}
 <\/script>
 `;
-    r = J(
-      r,
+    s = L(
+      s,
       "</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 (s = L(
+    s,
+    "</head>",
+    c
+  ), r) {
+    const i = `<script>${Pe()}<\/script>
+`;
+    s = L(
+      s,
+      "</body>",
+      i
+    );
+  }
+  return /^\s*<!DOCTYPE/i.test(s) ? s : `<!DOCTYPE html>${s}`;
+}, De = 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 r = e["index.html"] || "", { entryPoints: s, inlineScripts: o } = Fe(r);
+  if (s.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 u of o)
+    c[u.id] = u.content;
+  const i = /* @__PURE__ */ new Map(), a = [];
+  for (const u of s) {
+    const m = await Ve({
+      entryPoint: u,
       files: c,
       rollup: t,
       enableSourcemap: n
     });
-    i.set(d, l);
+    i.set(u, m), a.push(m);
   }
-  const a = Te(c, i, s);
+  const d = Je(
+    c,
+    i,
+    o,
+    !0
+  ), l = a.join(`
+`);
   return {
-    ...e,
-    "index.html": a
+    files: {
+      ...e,
+      "index.html": d
+    },
+    bundledJS: l
   };
-}, 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, Ae = (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;
+}, M = (e) => {
+  const t = { ...e };
+  for (const [n, r] of Object.entries(
+    t
+  ))
+    n.toLowerCase().endsWith(".html") && (t[n] = me(
+      r,
+      e
+    ));
+  return t;
+}, Qe = async ({
   files: e,
   rollup: t,
   enableSourcemap: n = !0,
   vizCache: r,
-  vizId: o,
-  slugCache: s,
+  vizId: s,
+  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:", r), x && console.log("[build] vizId:", s), !e && !r)
       throw new Error(
         "Either files or vizCache is required"
       );
-    if (!e && r && !o)
+    if (!e && r && !s)
       throw new Error(
         "vizId is required when using vizCache"
       );
-    if (!e && r && o && (e = Y(
-      (await r.get(o))?.files
+    if (!e && r && s && (e = ee(
+      (await r.get(s))?.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 = Se(e);
+    if (x && console.log("[build] version:", i), i === "v1") {
+      const a = M(e);
       return {
-        html: Me(I(e)),
+        html: Ae(
+          C(a)
+        ),
         runtimeVersion: i
       };
+    }
     if (i === "v2") {
       if (!t)
         throw new Error(
           "Rollup is required for v2 runtime"
         );
+      const a = await Me({
+        files: e,
+        rollup: t,
+        enableSourcemap: n
+      }), d = M(a);
       return {
-        html: I(
-          await Se({ files: e, rollup: t, enableSourcemap: n })
-        ),
+        html: C(d),
         runtimeVersion: i
       };
     }
@@ -1007,9 +1211,9 @@ ${o}
         throw new Error(
           "Rollup is required for v3 runtime"
         );
-      if (!r && !o) {
-        const a = me(e);
-        o = a.id, r = pe({
+      if (!r && !s) {
+        const a = xe(e);
+        s = a.id, r = Ee({
           initialContents: [a],
           handleCacheMiss: async () => {
             throw new Error(
@@ -1022,16 +1226,16 @@ ${o}
         throw new Error(
           "vizCache is required for v3 runtime"
         );
-      if (!o)
+      if (!s)
         throw new Error(
           "vizId is required for v3 runtime if vizCache is provided"
         );
-      return await ue({
+      return await be({
         files: e,
         rollup: t,
         vizCache: r,
-        vizId: o,
-        slugCache: s,
+        vizId: s,
+        slugCache: o,
         getSvelteCompiler: c
       });
     }
@@ -1040,14 +1244,21 @@ ${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 De({
+        files: e,
+        rollup: t,
+        enableSourcemap: n
+      }), d = M(
+        a.files
+      );
+      return {
+        html: C(d),
+        js: a.bundledJS,
         runtimeVersion: i
       };
     }
@@ -1055,21 +1266,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
+  Ee as a,
+  Qe as b,
+  ge as c,
+  Se as d,
+  Ye as e,
+  xe as f,
+  qe as g,
+  Ge as s,
+  be as v
 };
-//# sourceMappingURL=build-DnPT2Qew.js.map
+//# sourceMappingURL=build-B7w6NcTo.js.map