@marimo-team/islands 0.19.8-dev23 → 0.19.8-dev25

package/dist/main.js

@@ -13114,11 +13114,11 @@ ${d.join("\n")}`;
     var r = e.toUpperCase();
     return methods.indexOf(r) > -1 ? r : e;
   }
-  function Request(e, r) {
-    if (!(this instanceof Request)) throw TypeError('Please use the "new" operator, this DOM object constructor cannot be called as a function.');
+  function Request$1(e, r) {
+    if (!(this instanceof Request$1)) throw TypeError('Please use the "new" operator, this DOM object constructor cannot be called as a function.');
     r || (r = {});
     var c = r.body;
-    if (e instanceof Request) {
+    if (e instanceof Request$1) {
       if (e.bodyUsed) throw TypeError("Already read");
       this.url = e.url, this.credentials = e.credentials, r.headers || (this.headers = new Headers$2(e.headers)), this.method = e.method, this.mode = e.mode, this.signal = e.signal, !c && e._bodyInit != null && (c = e._bodyInit, e.bodyUsed = true);
     } else this.url = String(e);
@@ -13162,7 +13162,7 @@ ${d.join("\n")}`;
   }
   function fetch$1(e, r) {
     return new Promise(function(c, d) {
-      var f = new Request(e, r);
+      var f = new Request$1(e, r);
       if (f.signal && f.signal.aborted) return d(new DOMException$1("Aborted", "AbortError"));
       var _ = new XMLHttpRequest();
       function v() {
@@ -13280,11 +13280,11 @@ ${d.join("\n")}`;
       "POST",
       "PUT",
       "TRACE"
-    ], Request.prototype.clone = function() {
-      return new Request(this, {
+    ], Request$1.prototype.clone = function() {
+      return new Request$1(this, {
         body: this._bodyInit
       });
-    }, Body.call(Request.prototype), Body.call(Response$1.prototype), Response$1.prototype.clone = function() {
+    }, Body.call(Request$1.prototype), Body.call(Response$1.prototype), Response$1.prototype.clone = function() {
       return new Response$1(this._bodyInit, {
         status: this.status,
         statusText: this.statusText,
@@ -13319,7 +13319,7 @@ ${d.join("\n")}`;
         this.message = e, this.name = r, this.stack = Error(e).stack;
       }, DOMException$1.prototype = Object.create(Error.prototype), DOMException$1.prototype.constructor = DOMException$1;
     }
-    fetch$1.polyfill = true, g$3.fetch || (g$3.fetch = fetch$1, g$3.Headers = Headers$2, g$3.Request = Request, g$3.Response = Response$1);
+    fetch$1.polyfill = true, g$3.fetch || (g$3.fetch = fetch$1, g$3.Headers = Headers$2, g$3.Request = Request$1, g$3.Response = Response$1);
   })), require_fetch_npm_browserify = __commonJSMin(((e, r) => {
     init_fetch(), r.exports = self.fetch.bind(self);
   })), require_HTTPTransport = __commonJSMin(((e) => {
@@ -39750,6 +39750,17 @@ ${c.sqlString}
       }
       return e;
     },
+    markUntouched: (e, r) => {
+      let { cellId: c } = r;
+      if (!e.untouchedNewCells.has(c)) {
+        let r2 = new Set(e.untouchedNewCells);
+        return r2.add(c), {
+          ...e,
+          untouchedNewCells: r2
+        };
+      }
+      return e;
+    },
     scrollToTarget: (e) => {
       let r = e.scrollKey;
       if (r === null) return e;
@@ -44047,6 +44058,9 @@ ${c.sqlString}
   function isStaticNotebook() {
     return (window == null ? void 0 : window.__MARIMO_STATIC__) !== void 0;
   }
+  function getStaticVirtualFiles() {
+    return invariant(window.__MARIMO_STATIC__ !== void 0, "Not a static notebook"), window.__MARIMO_STATIC__.files;
+  }
   function shallowCompare(e, r) {
     return e === r ? true : e == null || r == null ? false : Array.isArray(e) && Array.isArray(r) ? arrayShallowEquals(e, r) : typeof e == "object" && typeof r == "object" ? shallowCompareObjects(e, r) : false;
   }
@@ -64073,6 +64087,35 @@ ${O}`,
       }
     });
   }
+  function deserializeBlob(e) {
+    var _a2;
+    let [r, c] = e.split(",", 2), d = (_a2 = /^data:(.+);base64$/.exec(r)) == null ? void 0 : _a2[1], f = atob(c), _ = f.length, v = new Uint8Array(_);
+    for (let e2 = 0; e2 < _; e2++) v[e2] = f.charCodeAt(e2);
+    return new Blob([
+      v
+    ], {
+      type: d
+    });
+  }
+  function withoutLeadingDot(e) {
+    return e.startsWith(".") ? e.slice(1) : e;
+  }
+  function resolveVirtualFileURL(e, r = getStaticVirtualFiles()) {
+    let c = maybeGetVirtualFile(e, r);
+    if (!c) return e;
+    let d = deserializeBlob(c);
+    return URL.createObjectURL(d);
+  }
+  function maybeGetVirtualFile(e, r) {
+    let c = document.baseURI;
+    c.startsWith("blob:") && (c = c.replace("blob:", ""));
+    let d = new URL(e, c).pathname, f = extractFilePath(e), _ = extractFilePath(d);
+    return r[e] || r[withoutLeadingDot(e)] || r[d] || r[withoutLeadingDot(d)] || f && r[f] || _ && r[_];
+  }
+  function extractFilePath(e) {
+    let r = e.indexOf("/@file/");
+    return r === -1 ? null : e.slice(r);
+  }
   function createPlugin(e, r = {}) {
     return {
       withData(c) {
@@ -64340,10 +64383,13 @@ ${O}`,
       return Logger.warn("AnyWidget value is not wire format:", e.value), e.value;
     }, [
       e.value
-    ]), { data: _, error: v, refetch: y } = useAsyncData(async () => await import(asRemoteURL(c).toString()).then(async (m2) => {
-      await m2.__tla;
-      return m2;
-    }), [
+    ]), { data: _, error: v, refetch: y } = useAsyncData(async () => {
+      let e2 = asRemoteURL(c).toString();
+      return isStaticNotebook() && (e2 = resolveVirtualFileURL(e2)), await import(e2).then(async (m2) => {
+        await m2.__tla;
+        return m2;
+      });
+    }, [
       d
     ]), S = !!v;
     (0, import_react.useEffect)(() => {
@@ -71094,25 +71140,6 @@ Image URL: ${r.imageUrl}`)), contextToXml({
     }
   };
   const contextCallbacks = singleFacet();
-  function deserializeBlob(e) {
-    return new Promise((r, c) => {
-      var _a2;
-      try {
-        let [c2, d] = e.split(",", 2), f = (_a2 = /^data:(.+);base64$/.exec(c2)) == null ? void 0 : _a2[1], _ = atob(d), v = _.length, y = new Uint8Array(v);
-        for (let e2 = 0; e2 < v; e2++) y[e2] = _.charCodeAt(e2);
-        r(new Blob([
-          y
-        ], {
-          type: f
-        }));
-      } catch (e2) {
-        c(ensureError(e2));
-      }
-    });
-  }
-  function ensureError(e) {
-    return e instanceof Error ? e : Error(`${e}`);
-  }
   var DEFAULT_FILE_SEARCH_CONFIG = {
     maxDepth: 3,
     maxResults: 20,
@@ -71244,7 +71271,7 @@ Image URL: ${r.imageUrl}`)), contextToXml({
             type: S
           });
           else if (y.contents) try {
-            E = await deserializeBlob(base64ToDataURL(y.contents, S));
+            E = deserializeBlob(base64ToDataURL(y.contents, S));
           } catch {
             E = new Blob([
               y.contents
@@ -73176,7 +73203,7 @@ Image URL: ${r.imageUrl}`)), contextToXml({
       return Logger.warn("Failed to get version from mount config"), null;
     }
   }
-  const marimoVersionAtom = atom(getVersionFromMountConfig() || "0.19.8-dev23"), showCodeInRunModeAtom = atom(true);
+  const marimoVersionAtom = atom(getVersionFromMountConfig() || "0.19.8-dev25"), showCodeInRunModeAtom = atom(true);
   atom(null);
   var import_compiler_runtime$88 = require_compiler_runtime();
   function useKeydownOnElement(e, r) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/islands",
-  "version": "0.19.8-dev23",
+  "version": "0.19.8-dev25",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",

package/src/components/editor/actions/useCellActionButton.tsx

@@ -43,6 +43,7 @@ import type { CellData } from "@/core/cells/types";
 import { formatEditorViews } from "@/core/codemirror/format";
 import { toggleToLanguage } from "@/core/codemirror/language/commands";
 import { switchLanguage } from "@/core/codemirror/language/extension";
+import { MARKDOWN_INITIAL_HIDE_CODE } from "@/core/codemirror/language/languages/markdown";
 import {
   aiEnabledAtom,
   appWidthAtom,
@@ -85,6 +86,7 @@ export function useCellActionButtons({ cell, closePopover }: Props) {
     sendToBottom,
     addColumnBreakpoint,
     clearCellOutput,
+    markUntouched,
   } = useCellActions();
   const splitCell = useSplitCellCallback();
   const runCell = useRunCell(cell?.cellId);
@@ -209,7 +211,7 @@ export function useCellActionButtons({ cell, closePopover }: Props) {
         icon: <MarkdownIcon />,
         label: "Convert to Markdown",
         hotkey: "cell.viewAsMarkdown",
-        handle: () => {
+        handle: async () => {
           const editorView = getEditorView();
           if (!editorView) {
             return;
@@ -219,6 +221,17 @@ export function useCellActionButtons({ cell, closePopover }: Props) {
             language: "markdown",
             keepCodeAsIs: false,
           });
+          // Code stays visible until the user blurs the cell
+          if (!config.hide_code && MARKDOWN_INITIAL_HIDE_CODE) {
+            await saveCellConfig({
+              configs: { [cellId]: { hide_code: MARKDOWN_INITIAL_HIDE_CODE } },
+            });
+            updateCellConfig({
+              cellId,
+              config: { hide_code: MARKDOWN_INITIAL_HIDE_CODE },
+            });
+            markUntouched({ cellId });
+          }
         },
         hidden: isSetupCell,
       },

package/src/components/editor/cell/CreateCellButton.tsx

@@ -12,6 +12,7 @@ import {
 import { maybeAddMarimoImport } from "@/core/cells/add-missing-import";
 import { useCellActions } from "@/core/cells/cells";
 import { LanguageAdapters } from "@/core/codemirror/language/LanguageAdapters";
+import { MARKDOWN_INITIAL_HIDE_CODE } from "@/core/codemirror/language/languages/markdown";
 import {
   getConnectionTooltip,
   isAppInteractionDisabled,
@@ -63,7 +64,7 @@ export const CreateCellButton = ({
     maybeAddMarimoImport({ autoInstantiate: true, createNewCell });
     onClick?.({
       code: LanguageAdapters.markdown.defaultCode,
-      hideCode: true,
+      hideCode: MARKDOWN_INITIAL_HIDE_CODE,
     });
   };
 

package/src/components/editor/cell/code/cell-editor.tsx

@@ -19,6 +19,7 @@ import {
   reconfigureLanguageEffect,
   switchLanguage,
 } from "@/core/codemirror/language/extension";
+import { MARKDOWN_INITIAL_HIDE_CODE } from "@/core/codemirror/language/languages/markdown";
 import type { LanguageAdapterType } from "@/core/codemirror/language/types";
 import {
   connectedDocAtom,
@@ -149,6 +150,17 @@ const CellEditorInternal = ({
       autoInstantiate,
       createNewCell: cellActions.createNewCell,
     });
+    // Code stays visible until the user blurs the cell
+    if (!cellConfig.hide_code && MARKDOWN_INITIAL_HIDE_CODE) {
+      void saveCellConfig({
+        configs: { [cellId]: { hide_code: MARKDOWN_INITIAL_HIDE_CODE } },
+      });
+      cellActions.updateCellConfig({
+        cellId,
+        config: { hide_code: MARKDOWN_INITIAL_HIDE_CODE },
+      });
+      cellActions.markUntouched({ cellId });
+    }
   });
 
   const aiEnabled = isAiEnabled(userConfig);

package/src/components/editor/renderers/cell-array.tsx

@@ -23,6 +23,7 @@ import { Tooltip } from "@/components/ui/tooltip";
 import { maybeAddMarimoImport } from "@/core/cells/add-missing-import";
 import { SETUP_CELL_ID } from "@/core/cells/ids";
 import { LanguageAdapters } from "@/core/codemirror/language/LanguageAdapters";
+import { MARKDOWN_INITIAL_HIDE_CODE } from "@/core/codemirror/language/languages/markdown";
 import { aiEnabledAtom } from "@/core/config/config";
 import { canInteractWithAppAtom } from "@/core/network/connection";
 import { useBoolean } from "@/hooks/useBoolean";
@@ -295,7 +296,7 @@ const AddCellButtons: React.FC<{
               cellId: { type: "__end__", columnId },
               before: false,
               code: LanguageAdapters.markdown.defaultCode,
-              hideCode: true,
+              hideCode: MARKDOWN_INITIAL_HIDE_CODE,
             });
           }}
         >

package/src/core/ai/context/providers/file.ts

@@ -237,7 +237,7 @@ export class FileContextProvider extends AIContextProvider<FileContextItem> {
                 fileDetails.contents as Base64String,
                 mimeType,
               );
-              blob = await deserializeBlob(dataURL);
+              blob = deserializeBlob(dataURL);
             } catch {
               // Fallback to treating as text
               blob = new Blob([fileDetails.contents], { type: mimeType });

package/src/core/cells/__tests__/cells.test.ts

@@ -2561,6 +2561,126 @@ describe("cell reducer", () => {
       expect(state.untouchedNewCells.has(newCellId)).toBe(false);
       expect(exportedForTesting.isCellCodeHidden(state, newCellId)).toBe(true);
     });
+
+    it("can mark an existing cell as untouched", () => {
+      // Create a cell without hideCode (not in untouchedNewCells)
+      actions.createNewCell({
+        cellId: "__end__",
+        before: false,
+        hideCode: false,
+      });
+
+      const newCellId =
+        state.cellIds.inOrderIds[state.cellIds.inOrderIds.length - 1];
+      expect(state.untouchedNewCells.has(newCellId)).toBe(false);
+
+      // Mark it as untouched
+      actions.markUntouched({ cellId: newCellId });
+
+      expect(state.untouchedNewCells.has(newCellId)).toBe(true);
+    });
+
+    it("markUntouched is idempotent", () => {
+      // Create a cell without hideCode
+      actions.createNewCell({
+        cellId: "__end__",
+        before: false,
+        hideCode: false,
+      });
+
+      const newCellId =
+        state.cellIds.inOrderIds[state.cellIds.inOrderIds.length - 1];
+      expect(state.untouchedNewCells.has(newCellId)).toBe(false);
+
+      // Mark as untouched multiple times
+      actions.markUntouched({ cellId: newCellId });
+      actions.markUntouched({ cellId: newCellId });
+      actions.markUntouched({ cellId: newCellId });
+
+      expect(state.untouchedNewCells.has(newCellId)).toBe(true);
+    });
+
+    it("markUntouched does not affect already untouched cells", () => {
+      // Create a cell with hideCode (already in untouchedNewCells)
+      actions.createNewCell({
+        cellId: "__end__",
+        before: false,
+        hideCode: true,
+      });
+
+      const newCellId =
+        state.cellIds.inOrderIds[state.cellIds.inOrderIds.length - 1];
+      expect(state.untouchedNewCells.has(newCellId)).toBe(true);
+
+      // Calling markUntouched should not change anything
+      actions.markUntouched({ cellId: newCellId });
+
+      expect(state.untouchedNewCells.has(newCellId)).toBe(true);
+    });
+
+    it("markTouched and markUntouched can toggle cell state", () => {
+      // Create a cell without hideCode
+      actions.createNewCell({
+        cellId: "__end__",
+        before: false,
+        hideCode: false,
+      });
+
+      const newCellId =
+        state.cellIds.inOrderIds[state.cellIds.inOrderIds.length - 1];
+
+      // Initially not untouched
+      expect(state.untouchedNewCells.has(newCellId)).toBe(false);
+
+      // Mark as untouched
+      actions.markUntouched({ cellId: newCellId });
+      expect(state.untouchedNewCells.has(newCellId)).toBe(true);
+
+      // Mark as touched
+      actions.markTouched({ cellId: newCellId });
+      expect(state.untouchedNewCells.has(newCellId)).toBe(false);
+
+      // Mark as untouched again
+      actions.markUntouched({ cellId: newCellId });
+      expect(state.untouchedNewCells.has(newCellId)).toBe(true);
+    });
+
+    it("markUntouched works for markdown cell conversion scenario", () => {
+      // Simulates converting a Python cell to Markdown
+      // 1. Create a regular cell (no hideCode)
+      actions.createNewCell({
+        cellId: "__end__",
+        before: false,
+        hideCode: false,
+      });
+
+      const cellId =
+        state.cellIds.inOrderIds[state.cellIds.inOrderIds.length - 1];
+
+      // Cell starts without hide_code and not in untouchedNewCells
+      expect(state.cellData[cellId].config.hide_code).toBe(false);
+      expect(state.untouchedNewCells.has(cellId)).toBe(false);
+      expect(exportedForTesting.isCellCodeHidden(state, cellId)).toBe(false);
+
+      // 2. Convert to markdown: set hide_code and mark as untouched
+      actions.updateCellConfig({
+        cellId,
+        config: { hide_code: true },
+      });
+      actions.markUntouched({ cellId });
+
+      // Code should NOT be hidden because cell is untouched (user can edit)
+      expect(state.cellData[cellId].config.hide_code).toBe(true);
+      expect(state.untouchedNewCells.has(cellId)).toBe(true);
+      expect(exportedForTesting.isCellCodeHidden(state, cellId)).toBe(false);
+
+      // 3. User blurs the cell (markTouched)
+      actions.markTouched({ cellId });
+
+      // Now code should be hidden
+      expect(state.untouchedNewCells.has(cellId)).toBe(false);
+      expect(exportedForTesting.isCellCodeHidden(state, cellId)).toBe(true);
+    });
   });
 
   describe("releaseCellAtoms", () => {

package/src/core/cells/cells.ts

@@ -1033,6 +1033,20 @@ const {
 
     return state;
   },
+  markUntouched: (state, action: { cellId: CellId }) => {
+    const { cellId } = action;
+
+    if (!state.untouchedNewCells.has(cellId)) {
+      const nextUntouchedNewCells = new Set(state.untouchedNewCells);
+      nextUntouchedNewCells.add(cellId);
+      return {
+        ...state,
+        untouchedNewCells: nextUntouchedNewCells,
+      };
+    }
+
+    return state;
+  },
   scrollToTarget: (state) => {
     // Scroll to the specified cell and clear the scroll key.
     const scrollKey = state.scrollKey;

package/src/core/codemirror/language/languages/markdown.ts

@@ -28,6 +28,13 @@ import type { LanguageAdapter } from "../types";
 
 export type MarkdownLanguageAdapterMetadata = MarkdownMetadata;
 
+/**
+ * Default hide_code setting for markdown cells.
+ * When true, the markdown code is hidden after the cell is blurred,
+ * showing only the rendered output.
+ */
+export const MARKDOWN_INITIAL_HIDE_CODE = true;
+
 /**
  * Language adapter for Markdown.
  */

package/src/core/static/__tests__/files.test.ts

@@ -6,7 +6,7 @@ import { afterAll, beforeAll, describe, expect, it, vi } from "vitest";
 import { createLoader } from "@/plugins/impl/vega/vega-loader";
 import { Functions } from "@/utils/functions";
 import type { DataURLString } from "@/utils/json/base64";
-import { patchFetch, patchVegaLoader } from "../files";
+import { patchFetch, patchVegaLoader, resolveVirtualFileURL } from "../files";
 
 // Start a tiny server to serve virtual files
 const server = http.createServer((request, response) => {
@@ -350,6 +350,181 @@ describe("patchVegaLoader - loader.load", () => {
   });
 });
 
+describe("resolveVirtualFileURL", () => {
+  // Mock URL.createObjectURL for jsdom environment
+  const mockBlobURLs = new Map<string, Blob>();
+  let blobCounter = 0;
+
+  beforeAll(() => {
+    URL.createObjectURL = vi.fn((blob: Blob) => {
+      const url = `blob:test-${blobCounter++}`;
+      mockBlobURLs.set(url, blob);
+      return url;
+    });
+    URL.revokeObjectURL = vi.fn((url: string) => {
+      mockBlobURLs.delete(url);
+    });
+  });
+
+  afterAll(() => {
+    mockBlobURLs.clear();
+  });
+
+  it("should return a blob URL for virtual files", () => {
+    const virtualFiles = {
+      "/@file/widget.js":
+        "data:text/javascript;base64,ZXhwb3J0IGRlZmF1bHQgeyByZW5kZXI6ICgpID0+IHt9IH0=" as DataURLString,
+    };
+
+    const result = resolveVirtualFileURL("/@file/widget.js", virtualFiles);
+
+    expect(result).toMatch(/^blob:/);
+  });
+
+  it("should return the original URL for non-virtual files", () => {
+    const virtualFiles = {};
+
+    const result = resolveVirtualFileURL(
+      "http://example.com/widget.js",
+      virtualFiles,
+    );
+
+    expect(result).toBe("http://example.com/widget.js");
+  });
+
+  it("should handle various URL formats", () => {
+    const virtualFiles = {
+      "/@file/module.js":
+        "data:text/javascript;base64,Y29uc29sZS5sb2coJ3Rlc3QnKQ==" as DataURLString,
+    };
+
+    const testUrls = [
+      "/@file/module.js",
+      "./@file/module.js",
+      "http://example.com/@file/module.js",
+    ];
+
+    for (const url of testUrls) {
+      const result = resolveVirtualFileURL(url, virtualFiles);
+      expect(result).toMatch(/^blob:/);
+    }
+  });
+
+  it("should create blob URL with correct content", async () => {
+    const jsCode = "export default { render: () => {} }";
+    const base64Code = btoa(jsCode);
+    const virtualFiles = {
+      "/@file/test-module.js":
+        `data:text/javascript;base64,${base64Code}` as DataURLString,
+    };
+
+    const blobUrl = resolveVirtualFileURL(
+      "/@file/test-module.js",
+      virtualFiles,
+    );
+
+    expect(blobUrl).toMatch(/^blob:/);
+    expect(URL.createObjectURL).toHaveBeenCalled();
+
+    // Verify blob content through the mock
+    const blob = mockBlobURLs.get(blobUrl);
+    expect(blob).toBeDefined();
+    const text = await blob!.text();
+    expect(text).toBe(jsCode);
+  });
+
+  it("should handle file:// URLs with @file/ paths", () => {
+    const virtualFiles = {
+      "/@file/local-module.js":
+        "data:text/javascript;base64,ZXhwb3J0IGRlZmF1bHQge30=" as DataURLString,
+    };
+
+    const result = resolveVirtualFileURL(
+      "file:///Users/test/@file/local-module.js",
+      virtualFiles,
+    );
+
+    expect(result).toMatch(/^blob:/);
+  });
+
+  it("should handle different MIME types", async () => {
+    const virtualFiles = {
+      "/@file/script.js":
+        "data:application/javascript;base64,Y29uc3QgeCA9IDE=" as DataURLString,
+    };
+
+    const blobUrl = resolveVirtualFileURL("/@file/script.js", virtualFiles);
+
+    // Should still be a valid blob URL
+    expect(blobUrl).toMatch(/^blob:/);
+
+    // Verify blob content through the mock
+    const blob = mockBlobURLs.get(blobUrl);
+    expect(blob).toBeDefined();
+    const text = await blob!.text();
+    expect(text).toBe("const x = 1");
+  });
+
+  it("should handle blob: base URIs correctly", () => {
+    // Mock document.baseURI to simulate blob: protocol
+    const originalBaseURI = document.baseURI;
+    Object.defineProperty(document, "baseURI", {
+      value: "blob:https://example.com/uuid",
+      configurable: true,
+    });
+
+    const virtualFiles = {
+      "/@file/blob-module.js":
+        "data:text/javascript;base64,ZXhwb3J0IGRlZmF1bHQge30=" as DataURLString,
+    };
+
+    const result = resolveVirtualFileURL("/@file/blob-module.js", virtualFiles);
+
+    expect(result).toMatch(/^blob:/);
+
+    // Restore original baseURI
+    Object.defineProperty(document, "baseURI", {
+      value: originalBaseURI,
+      configurable: true,
+    });
+  });
+
+  it("should handle data URLs with no explicit MIME type", async () => {
+    const virtualFiles = {
+      "/@file/generic.bin": "data:;base64,SGVsbG8gV29ybGQ=" as DataURLString,
+    };
+
+    const blobUrl = resolveVirtualFileURL("/@file/generic.bin", virtualFiles);
+    expect(blobUrl).toMatch(/^blob:/);
+
+    // Verify blob content through the mock
+    const blob = mockBlobURLs.get(blobUrl);
+    expect(blob).toBeDefined();
+    const text = await blob!.text();
+    expect(text).toBe("Hello World");
+  });
+
+  it("should match URLs with prefix paths before /@file/", async () => {
+    const virtualFiles = {
+      "/@file/4263-66-yUGhgQXp.js":
+        "data:application/javascript;base64,ZnVuY3Rpb24gcmVuZGVyKCkge30=" as DataURLString,
+    };
+
+    const blobUrl = resolveVirtualFileURL(
+      "https://molab.marimo.app/preview/@file/4263-66-yUGhgQXp.js",
+      virtualFiles,
+    );
+
+    expect(blobUrl).toMatch(/^blob:/);
+
+    // Verify blob content through the mock
+    const blob = mockBlobURLs.get(blobUrl);
+    expect(blob).toBeDefined();
+    const text = await blob!.text();
+    expect(text).toBe("function render() {}");
+  });
+});
+
 describe("maybeGetVirtualFile utility function", () => {
   it("should handle URLs without leading dots correctly", async () => {
     const virtualFiles = {
@@ -370,6 +545,25 @@ describe("maybeGetVirtualFile utility function", () => {
     expect(text2).toBe("test");
   });
 
+  it("should match URLs with prefix paths before /@file/", async () => {
+    const virtualFiles = {
+      "/@file/4263-66-yUGhgQXp.js":
+        "data:application/javascript;base64,ZnVuY3Rpb24gcmVuZGVyKCkge30=" as DataURLString,
+    };
+
+    const unpatch = patchFetch(virtualFiles);
+
+    // Test URL with a prefix path before /@file/
+    const response = await window.fetch(
+      "https://molab.marimo.app/preview/@file/4263-66-yUGhgQXp.js",
+    );
+    const text = await response.text();
+
+    expect(text).toBe("function render() {}");
+
+    unpatch();
+  });
+
   it("should handle complex file:// URLs with nested paths", async () => {
     const virtualFiles = {
       "/@file/nested/data.json":

package/src/core/static/files.ts

@@ -1,6 +1,8 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
 import type { Loader } from "@/plugins/impl/vega/vega-loader";
+import { deserializeBlob } from "@/utils/blob";
+import type { DataURLString } from "@/utils/json/base64";
 import { Logger } from "@/utils/Logger";
 import { getStaticVirtualFiles } from "./static-state";
 import type { StaticVirtualFiles } from "./types";
@@ -120,6 +122,24 @@ function withoutLeadingDot(path: string): string {
   return path.startsWith(".") ? path.slice(1) : path;
 }
 
+/**
+ * Resolve a URL to a blob URL if it's a virtual file, for use with dynamic import().
+ * Unlike fetch, import() can't be patched, so we need to convert data URLs to blob URLs.
+ *
+ * @returns The original URL if not a virtual file, or a blob URL if it is
+ */
+export function resolveVirtualFileURL(
+  url: string,
+  files: StaticVirtualFiles = getStaticVirtualFiles(),
+): string {
+  const vfile = maybeGetVirtualFile(url, files);
+  if (!vfile) {
+    return url;
+  }
+  const blob = deserializeBlob(vfile as DataURLString);
+  return URL.createObjectURL(blob);
+}
+
 function maybeGetVirtualFile(
   url: string,
   files: StaticVirtualFiles,
@@ -130,14 +150,11 @@ function maybeGetVirtualFile(
   }
   const pathname = new URL(url, base).pathname;
 
-  // If if the URL starts with file://, then using the document.baseURI
-  // will not work. In this case, should just chop off from /@file/...
-  if (url.startsWith("file://")) {
-    const indexOfFile = url.indexOf("/@file/");
-    if (indexOfFile !== -1) {
-      url = url.slice(indexOfFile);
-    }
-  }
+  // Extract the /@file/... suffix from the URL or pathname
+  // This handles URLs like https://example.com/prefix/@file/foo.js
+  // or file:///path/to/@file/foo.js
+  const filePathFromUrl = extractFilePath(url);
+  const filePathFromPathname = extractFilePath(pathname);
 
   // Few variations to grab the URL.
   // This can happen if a static file was open at file:// or https://
@@ -145,6 +162,19 @@ function maybeGetVirtualFile(
     files[url] ||
     files[withoutLeadingDot(url)] ||
     files[pathname] ||
-    files[withoutLeadingDot(pathname)]
+    files[withoutLeadingDot(pathname)] ||
+    (filePathFromUrl && files[filePathFromUrl]) ||
+    (filePathFromPathname && files[filePathFromPathname])
   );
 }
+
+/**
+ * Extract the /@file/... path from a URL string
+ */
+function extractFilePath(url: string): string | null {
+  const indexOfFile = url.indexOf("/@file/");
+  if (indexOfFile !== -1) {
+    return url.slice(indexOfFile);
+  }
+  return null;
+}

package/src/plugins/impl/anywidget/AnyWidgetPlugin.tsx

@@ -8,6 +8,8 @@ import useEvent from "react-use-event-hook";
 import { z } from "zod";
 import { MarimoIncomingMessageEvent } from "@/core/dom/events";
 import { asRemoteURL } from "@/core/runtime/config";
+import { resolveVirtualFileURL } from "@/core/static/files";
+import { isStaticNotebook } from "@/core/static/static-state";
 import { useAsyncData } from "@/hooks/useAsyncData";
 import { useDeepCompareMemoize } from "@/hooks/useDeepCompareMemoize";
 import {
@@ -93,7 +95,11 @@ const AnyWidgetSlot = (
     error,
     refetch,
   } = useAsyncData(async () => {
-    const url = asRemoteURL(jsUrl).toString();
+    let url = asRemoteURL(jsUrl).toString();
+    // In static notebooks, resolve virtual files to blob URLs for import()
+    if (isStaticNotebook()) {
+      url = resolveVirtualFileURL(url);
+    }
     return await import(/* @vite-ignore */ url);
     // Re-render on jsHash change (which is a hash of the contents of the file)
     // instead of a jsUrl change because URLs may change without the contents

package/src/utils/__tests__/blob.test.ts

@@ -20,7 +20,7 @@ describe("Blob serialization and deserialization", () => {
 
   test("deserializeBlob should deserialize a base64 string to a Blob", async () => {
     const serialized = await serializeBlob(testBlob);
-    const deserialized = await deserializeBlob(serialized);
+    const deserialized = deserializeBlob(serialized);
     expect(deserialized).toBeDefined();
     expect(deserialized.size).toBe(testBlob.size);
     expect(deserialized.type).toBe(testBlob.type);
@@ -28,7 +28,7 @@ describe("Blob serialization and deserialization", () => {
 
   test("deserialized Blob should contain the original content", async () => {
     const serialized = await serializeBlob(testBlob);
-    const deserialized = await deserializeBlob(serialized);
+    const deserialized = deserializeBlob(serialized);
     const reader = new FileReader();
     // eslint-disable-next-line unicorn/prefer-blob-reading-methods
     reader.readAsText(deserialized);
@@ -45,7 +45,7 @@ describe("Blob serialization and deserialization", () => {
       type: "image/png",
     });
     const serialized = await serializeBlob(imageBlob);
-    const deserialized = await deserializeBlob(serialized);
+    const deserialized = deserializeBlob(serialized);
     expect(deserialized).toBeDefined();
     expect(deserialized.size).toBe(imageBlob.size);
     expect(deserialized.type).toBe(imageBlob.type);

package/src/utils/blob.ts

@@ -14,32 +14,19 @@ export function serializeBlob<T>(blob: Blob): Promise<DataURLString> {
   });
 }
 
-export function deserializeBlob(serializedBlob: DataURLString): Promise<Blob> {
-  return new Promise((resolve, reject) => {
-    try {
-      // Extract the base64 data from the data URL
-      const [prefix, base64Data] = serializedBlob.split(",", 2);
-      const mimeType = /^data:(.+);base64$/.exec(prefix)?.[1];
-      // Decode the base64 string
-      const binaryString = atob(base64Data);
-      // Convert the binary string to an array buffer
-      const len = binaryString.length;
-      const bytes = new Uint8Array(len);
-      for (let i = 0; i < len; i++) {
-        bytes[i] = binaryString.charCodeAt(i);
-      }
-      // Create a new Blob from the array buffer
-      const blob = new Blob([bytes], { type: mimeType });
-      resolve(blob);
-    } catch (error) {
-      reject(ensureError(error));
-    }
-  });
-}
-
-function ensureError(error: unknown): Error {
-  if (error instanceof Error) {
-    return error;
+export function deserializeBlob(serializedBlob: DataURLString): Blob {
+  // Extract the base64 data from the data URL
+  const [prefix, base64Data] = serializedBlob.split(",", 2);
+  const mimeType = /^data:(.+);base64$/.exec(prefix)?.[1];
+  // Decode the base64 string
+  const binaryString = atob(base64Data);
+  // Convert the binary string to an array buffer
+  const len = binaryString.length;
+  const bytes = new Uint8Array(len);
+  for (let i = 0; i < len; i++) {
+    bytes[i] = binaryString.charCodeAt(i);
   }
-  return new Error(`${error}`);
+  // Create a new Blob from the array buffer
+  const blob = new Blob([bytes], { type: mimeType });
+  return blob;
 }