Compositional Resource Management Pattern for Dependent Lifetimes in TypeScript

// Current nested structure (simplified)
const paddedMat = yield* E.acquireUseRelease(
E.succeed(cv.matFromImageData(
    new ImageData(
    new Uint8ClampedArray(obj),
    imageBitmap.width,
    imageBitmap.height,
    ),
)),
(src) =>
    E.acquireUseRelease(E.succeed(new cv.Mat()), (processedMat) =>
    E.succeed(processedMat).pipe(
        E.tap((processedMat) =>
        // Convert color space from RGBA to RGB
        cv.cvtColor(src, processedMat, cv.COLOR_RGBA2RGB)
        ),
        E.andThen(padImage),
    ), (processedMat) => E.sync(processedMat.delete)),
(src) =>
    E.sync(src.delete),
);
// How to manage `paddedMat` cleanup without nesting further?

// How to model this with a clean, flat structure?
const paddedMat = yield* withResource(src, (src) => 
  withResource(processedMat, (processedMat) => 
    cv.cvtColor(src, processedMat, ...),
    padImage(processedMat) // Returns paddedMat
  )
);
// All resources (src, processedMat, paddedMat) are automatically tracked and released.